[hidden]{display:none !important;}
:root{
  --bg:#0a0a0f; --text:#fff; --muted:#a6abb3; --ring:#494f57;
  --radius:18px; --shadow:0 14px 46px rgba(0,0,0,.5);
}

/* nix markierbar / kein blau */
*{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
::selection{background:transparent}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  /* Body: Inter */
  font:16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; padding-bottom:60px;
}

/* Glas */
.glassy{
  position:relative;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  backdrop-filter: blur(18px) saturate(150%) brightness(1.05) contrast(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.05) contrast(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 18px rgba(255,255,255,.08), 0 12px 42px rgba(0,0,0,.45);
}
.glassy::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
  mix-blend-mode:screen; opacity:.55;
}

/* BG */
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block;}

.site-header{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 16px 6px;}

/* Headline: Iceberg */
.brand-title{
  margin:0; text-align:center;
  font-family:"Iceberg", sans-serif;
  font-size:clamp(28px, 6vw, 56px);
  line-height:1.05; letter-spacing:.5px; color:#fff;
  text-shadow:
    0 0 2px rgba(0,0,0,.75),
    0 1px 10px rgba(0,0,0,.55),
    0 0 8px rgba(115,45,225,.95),
    0 0 20px rgba(130,60,240,.80),
    0 0 30px rgba(115,45,225,.60);
}

/* Subtitle: Poppins */
.subtitle{
  margin:2px auto 16px; padding:0; max-width:900px; text-align:center; color:#fff;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  font-weight:500; letter-spacing:.2px;
  text-shadow:0 0 2px rgba(0,0,0,.78), 0 1px 10px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.45);
  -webkit-text-stroke:.35px rgba(0,0,0,.35);
}

.container{max-width:1100px; margin:0 auto; padding:0 16px 44px;}

.toolbar{display:flex; gap:12px; align-items:center; justify-content:center; margin:8px 0 18px;}
.toolbar-right{display:flex; gap:8px; align-items:center;}
.glass{padding:10px}

/* Input direkt auf Glas – selektierbar */
#search{
  flex:1 1 580px; min-width:0; padding:14px 18px; border:none; background:transparent; outline:none;
  color:var(--text); font-size:15.5px; letter-spacing:.2px;
  user-select:text; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text;
}
#search::placeholder{color:#cbb7ff; opacity:.55;}
#search::selection{ background:#000; color:#fff; }
#search::-moz-selection{ background:#000; color:#fff; }
.toolbar.glassy:focus-within{ box-shadow:none; }

/* Reset = weißer Chip */
.chip-btn{padding:8px 12px; border-radius:10px; cursor:pointer; font-size:13px; color:#fff; background:transparent; border:none; text-shadow:0 1px 2px rgba(0,0,0,.35);}
.chip-btn:hover{filter:brightness(1.06);}

/* Grid */
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px;}
@media (max-width:480px){ .grid{grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px;} }

/* Karten */
a.card{
  display:flex; flex-direction:column; gap:8px; justify-content:center; align-items:flex-start;
  text-decoration:none; color:var(--text); min-height:110px; padding:16px; border-radius:var(--radius);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
a.card:hover{transform:translateY(-2px)}
.card-head{display:flex; align-items:center; gap:10px;}
.card-title{font-weight:700; font-size:17px;}
.card .desc{color:var(--muted); margin-top:2px; font-size:13px}

/* Icon: monochrom (currentColor) */
.icon{display:inline-block; width:22px; height:22px; opacity:.95;}
.icon svg{
  display:block; width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:480px){
  .icon{ width:16px; height:16px; }
}

/* Drop overlay */
.drop-hint{position:fixed; inset:0; display:grid; place-items:center; background:rgba(8,10,12,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:20; pointer-events:none;}
.drop-inner{padding:24px 26px; text-align:center;}
.drop-inner h2{margin:0 0 8px}

/* Toast */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  padding:12px 16px; border-radius:12px; background:rgba(30,32,36,.95); border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow); font-size:14px; z-index:30;}

/* Footer: Desktop fixed + Hover für Copy */
.footer-trigger{position:fixed; left:0; right:0; bottom:0; height:8px; z-index:24;}
.footer-glass{position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:25; display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px 8px; font-size:12.5px; line-height:1.35; opacity:.92;}
.footer-glass.glassy{
  background:radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(120%) brightness(.98) contrast(1.02);
  -webkit-backdrop-filter:blur(14px) saturate(120%) brightness(.98) contrast(1.02);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 28px rgba(0,0,0,.35);}
.footer-row{white-space:nowrap}
.footer-row.copy{max-height:0; opacity:0; overflow:hidden; transition:max-height .24s ease, opacity .18s ease;}
.footer-trigger:hover + .footer-glass .footer-row.copy, .footer-glass:hover .footer-row.copy{max-height:42px; opacity:1;}
.site-footer{display:none}

/* Phone: Footer NICHT fixed, ganz unten auf der Seite */
@media (max-width:600px){
  body{padding-bottom:20px;}
  .footer-trigger{display:none;}
  .footer-glass{position:static; transform:none; margin:18px auto 0; display:flex;}
  .footer-row.copy{max-height:100px; opacity:1;}
}

/* Ultra-kompakt auf kleinen Phones */
@media (max-width:480px){
  .site-header{ padding:14px 12px 4px; gap:6px; }
  .brand-title{ font-size:clamp(22px, 7vw, 34px); }
  .subtitle{ font-size:12px; line-height:1.35; margin:0 0 10px; }

  .container{ padding:0 10px 12px; }
  .toolbar{ margin:6px 0 10px; }
  .glass{ padding:8px; }
  #search{ padding:10px 12px; font-size:14px; }

  .grid{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:8px;
  }

  a.card{
    min-height:74px;
    padding:10px;
    gap:6px;
  }
  .icon{ width:16px; height:16px; }
  .card-title{ font-size:14px; }
  .card .desc{ font-size:11px; opacity:.95; }

  /* Footer kleiner & am Seitenende */
  .footer-glass{ margin:10px auto 0; font-size:10.5px; padding:6px 8px; }
}

/* Logo-Leiste in Karten (Brand-Logos, monochrom) */
.logo-row{
  display:flex; align-items:center; gap:8px; margin-top:2px; flex-wrap:wrap; opacity:.92;
}
.logo{
  width:18px; height:18px; display:block; filter:drop-shadow(0 0 1px rgba(0,0,0,.25));
  opacity:.95;
}
a.card:hover .logo-row .logo{ opacity:1; }

/* Handy kompakt */
@media (max-width:480px){
  .logo{ width:14px; height:14px; }
  .logo-row{ gap:6px; }
}

.logo-svg{width:18px;height:18px;display:block}
@media (max-width:480px){.logo-svg{width:14px;height:14px}}

.logo-row{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; opacity:.95; }
.logo{ width:18px; height:18px; display:block; opacity:.95; filter:drop-shadow(0 0 1px rgba(0,0,0,.25)); }
.logo-svg{ width:18px; height:18px; display:block; color:#fff; }
@media (max-width:480px){
  .logo{ width:14px; height:14px; }
  .logo-svg{ width:14px; height:14px; }
}

/* Externe/freie Icons (SVG/PNG) ohne Verzerrung */
.logo-free{height:18px;width:auto;object-fit:contain;filter:none;}
@media (max-width:480px){.logo-free{height:14px}}

@media (max-width:480px){
  .logo-free{ height:14px; }
}

/* Karten nicht ziehbar (Desktop/Chromium) */
a.card, a.card * { -webkit-user-drag: none; }
.logo, .logo-svg, .logo-free { -webkit-user-drag: none; }


/* ===== Favorites star (only star, no circle) ===== */
:root{
  --fav-on: rgba(242, 201, 76, 0.95);
  --fav-off: rgba(255,255,255,0.9);
}

.card-head{
  width: 100%;
}

.title-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.card-title{
  flex: 1 1 auto;
  min-width: 0;
}

.fav-star{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.fav-star svg{
  width: 22px;
  height: 22px;
  display: block;
}

.fav-star:active{
  transform: scale(0.92);
}

/* ===== Drag UI ===== */
.grid.dragging{
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.card.placeholder{
  opacity: 0.22;
  border-style: dashed;
}

.card.dimmed{
  opacity: 0.32;
  filter: grayscale(0.15);
}

.drag-ghost{
  transform: translateZ(0) scale(1.03);
  box-shadow: 0 18px 55px rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.28);
}

/* iOS-like wiggle for tiles that are making room (NOT the ghost) */
@keyframes vt-wiggle{
  0% { transform: rotate(-0.6deg); }
  100% { transform: rotate(0.6deg); }
}
.card.wiggle{
  animation: vt-wiggle 0.16s ease-in-out infinite alternate;
  transform-origin: 65% 35%;
}


/* --- Fav star: always top-right, same size, no overlap with title --- */
.card{ position: relative; }
.fav-star{
  position:absolute;
  top:14px;
  right:14px;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.fav-star svg{ width:22px; height:22px; display:block; }
/* give title room on the right so it never crosses the star */
.card-title{ padding-right:46px; display:block; }

/* ===== Mobile drag handle (touch only) ===== */
.card.has-handle{ padding-bottom: 52px; position: relative; }
.drag-handle{
  position:absolute; left:0; right:0; bottom:0;
  height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(255,220,120,.10), rgba(255,220,120,.06));
  border-top: 1px solid rgba(255,255,255,.10);
  touch-action: none;
}
.drag-grip{ display:flex; flex-direction:column; gap:6px; width:44px; }
.drag-grip i{ display:block; height:3px; border-radius:99px; background: rgba(255,255,255,.55); }

.card{ overflow: hidden; }