:root{
  --bg:#0a0c12; --panel:#121726; --panel2:#171e31; --text:#eef2ff; --muted:#9aa8c7;
  --line:rgba(255,255,255,.1); --accent:#ff4fd8; --accent2:#58d6ff; --good:#36e7a6; --warn:#ffd166; --bad:#ff6b6b;
  --shadow:0 18px 60px rgba(0,0,0,.45); --radius:22px;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(255,79,216,.22),transparent 32%),radial-gradient(circle at 90% 10%,rgba(88,214,255,.18),transparent 36%),var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} button{border:0;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-weight:800;padding:.8rem 1.1rem;cursor:pointer;box-shadow:0 10px 30px rgba(255,79,216,.2)} button:hover{filter:brightness(1.08)} button.ghost,.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid var(--line);color:var(--text)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.8rem clamp(1rem,4vw,3rem);background:rgba(10,12,18,.75);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:.75rem;align-items:center;font-size:1.05rem}.brand img{width:42px;height:42px}.brand b{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.topbar nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.topbar a,.topbar button{font-size:.92rem;padding:.55rem .8rem;border-radius:999px}.topbar nav a:hover{background:rgba(255,255,255,.08)}
main{width:min(1240px,calc(100% - 2rem));margin:0 auto 4rem}.hero{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:stretch;padding:3.2rem 0 1.2rem}.hero h1{font-size:clamp(2.1rem,5vw,4.8rem);line-height:.96;margin:.5rem 0}.hero p{font-size:1.07rem;color:var(--muted);max-width:760px}.pill{display:inline-flex!important;border:1px solid var(--line);border-radius:999px;padding:.45rem .75rem;background:rgba(255,255,255,.06);color:var(--text)!important}.hero-card,.panel{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}.hero-card{padding:1.4rem;display:flex;flex-direction:column;justify-content:center;min-height:190px}.hero-card .emoji{font-size:3rem}.hero-card p{font-size:.95rem}.panel{padding:1rem}.auth-panel{margin-top:1rem}.auth-panel h1{margin:.2rem 0}.auth-panel p{color:var(--muted)}
.page{display:none}.page.active{display:block}.filters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:.7rem}.filters input,.filters select,.grid-form input,.grid-form select,.grid-form textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:.82rem .9rem;outline:none}.filters select option{background:#121726}.grid-form{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;align-items:end}.grid-form label{color:var(--muted);display:grid;gap:.3rem}.grid-form .full{grid-column:1/-1}.grid-form.wide{grid-template-columns:repeat(4,1fr)}
.count{color:var(--muted);padding:1rem .2rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.anime-card{background:rgba(18,23,38,.88);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:100%;transition:.2s transform,.2s border-color}.anime-card:hover{transform:translateY(-4px);border-color:rgba(255,79,216,.45)}.poster-wrap{aspect-ratio:2/2.85;background:linear-gradient(135deg,#182034,#2b1640)}.poster{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:1rem}.card-body h3{font-size:1.03rem;margin:.55rem 0 .25rem;line-height:1.15}.meta,.desc{color:var(--muted);font-size:.88rem}.desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.badges,.links{display:flex;gap:.35rem;flex-wrap:wrap}.badge{border-radius:999px;font-size:.72rem;padding:.25rem .48rem;border:1px solid var(--line);background:rgba(255,255,255,.07)}.badge.good{color:#04130d;background:var(--good);border-color:transparent;font-weight:800}.badge.warn{color:#1b1300;background:var(--warn);border-color:transparent;font-weight:800}.badge.hot{background:rgba(255,79,216,.15);color:#ffc7f3;border-color:rgba(255,79,216,.3)}.links a,.mini{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:.42rem .58rem;font-size:.78rem;color:var(--text)}.load-more{display:block;margin:1.4rem auto}.page-head{margin:1rem 0}.timeline,.community-list{display:grid;gap:.7rem}.timeline-item,.community-item{display:grid;grid-template-columns:150px 1fr auto;gap:.8rem;align-items:center;background:rgba(18,23,38,.86);border:1px solid var(--line);border-radius:18px;padding:.85rem}.timeline-item small,.community-item small{color:var(--muted)}
.detail-grid{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:1.2rem;margin-top:1rem}.detail-grid img{width:100%;border-radius:22px;box-shadow:var(--shadow)}.detail-main{padding:1.2rem}.detail-main h2{font-size:clamp(2rem,4vw,3.4rem);margin:.2rem 0}.detail-main p{color:var(--muted);line-height:1.55}.watch-form{display:grid;grid-template-columns:1fr 110px 1.6fr auto;gap:.6rem;margin:1rem 0}.comments{display:grid;gap:.6rem}.comment{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:.7rem}.admin-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}code{background:rgba(255,255,255,.08);padding:.1rem .35rem;border-radius:.35rem;color:#fff}.statusline{color:var(--muted)}
@media(max-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}.filters,.grid-form.wide{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.watch-form{grid-template-columns:1fr 1fr}}
@media(max-width:700px){main{width:min(100% - 1rem,1240px)}.topbar{align-items:flex-start;gap:.7rem;flex-direction:column}.cards{grid-template-columns:1fr 1fr;gap:.7rem}.filters,.grid-form,.grid-form.wide{grid-template-columns:1fr}.hero{padding-top:1.5rem}.card-body{padding:.75rem}.timeline-item,.community-item{grid-template-columns:1fr}.watch-form{grid-template-columns:1fr}.brand img{width:36px;height:36px}}
@media(max-width:430px){.cards{grid-template-columns:1fr}.topbar nav{gap:.25rem}.topbar a,.topbar button{font-size:.84rem;padding:.46rem .62rem}}


/* ADMIN-ONLY ECCHI PRIVACY FIX */
body.non-admin-user #ecchi-filter,
body.non-admin-user #ecchiFilter,
body.non-admin-user .ecchi-filter,
body.non-admin-user .ecchi-PRIVATE-OLD,
body.non-admin-user .ecchi-badge,
body.non-admin-user [data-ecchi] {
  display: none !important;
}


/* Genre bleibt für alle sichtbar, nur Ecchi bleibt privat */
body.non-admin-user .genre,
body.non-admin-user .genre-badge,
body.non-admin-user .chip.genre,
body.non-admin-user [data-genre] {
  display: inline-flex !important;
}

body.non-admin-user #genre-filter,
body.non-admin-user #genreFilter,
body.non-admin-user select[name="genre"],
body.non-admin-user .genre-filter {
  display: inline-flex !important;
}


/* IPHONE 16 PRO SAFARI OPTIMIERUNG */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

input,
select,
textarea,
button {
  font-size: 16px !important;
}

.old-watch-field-hidden {
  display: none !important;
}

.iphone-watch-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
}

.iphone-watch-title {
  font-weight: 800;
  margin: 4px 0 10px;
  color: #f3edff;
}

.iphone-watch-buttons,
.iphone-rating-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.iphone-watch-buttons button,
.iphone-rating-buttons button {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #f7f2ff;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.iphone-watch-buttons button.active,
.iphone-rating-buttons button.active {
  background: linear-gradient(135deg, #eb5ee8, #65c8ff);
  color: white;
  box-shadow: 0 12px 28px rgba(235,94,232,.25);
}

.iphone-note-field {
  min-height: 48px !important;
  border-radius: 16px !important;
  padding: 0 14px !important;
  width: min(100%, 420px) !important;
}

.iphone-save-button {
  min-height: 52px !important;
  border-radius: 999px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  font-weight: 900 !important;
}

/* Detailseite schöner auf iPhone */
@media (max-width: 720px) {
  header,
  .topbar,
  nav {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .hero {
    padding-top: 38px !important;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.04 !important;
  }

  .filters,
  .filterbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 22px !important;
  }

  .filters input,
  .filters select,
  .filterbar input,
  .filterbar select {
    width: 100% !important;
    min-height: 48px !important;
  }

  .grid,
  .anime-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .detail,
  .detail-layout,
  .anime-detail {
    grid-template-columns: 1fr !important;
  }

  .detail-card,
  .card {
    border-radius: 24px !important;
  }

  .detail-card h1,
  .detail-card h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.12 !important;
  }

  .poster,
  .cover,
  .detail img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 22px !important;
  }

  .iphone-watch-buttons,
  .iphone-rating-buttons {
    grid-template-columns: 1fr !important;
  }

  .iphone-note-field {
    width: 100% !important;
    display: block !important;
    margin: 10px 0 !important;
  }

  .iphone-save-button {
    width: 100% !important;
    margin-top: 10px !important;
  }

  a,
  button {
    min-height: 42px;
  }
}

/* iPhone 16 Pro Breite */
@media (min-width: 390px) and (max-width: 460px) {
  main,
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero h1 {
    letter-spacing: -1px;
  }
}


/* DEVICE OPTIMIERUNG IPHONE16PRO FIREFOX LINUX */

/* Allgemein */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Keine iPhone-Zoom-Probleme bei Inputs */
input,
select,
textarea,
button {
  font-size: 16px !important;
}

/* Bessere Touch-Flächen */
button,
a,
select,
input {
  -webkit-tap-highlight-color: transparent;
}

/* PC Firefox / Linux */
@media (min-width: 1100px) {
  main,
  .container {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .grid,
  .anime-grid,
  #animeGrid,
  .cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 22px;
  }

  .filters,
  .filterbar {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr .8fr .8fr;
    gap: 14px;
    align-items: center;
  }

  .detail,
  .detail-layout,
  .anime-detail {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
    align-items: start;
  }

  .poster,
  .cover,
  .detail img {
    max-width: 360px;
    width: 100%;
    height: auto;
  }
}

/* Sehr grosse PC-Bildschirme */
@media (min-width: 1550px) {
  .grid,
  .anime-grid,
  #animeGrid,
  .cards {
    grid-template-columns: repeat(5, minmax(230px, 1fr));
  }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1099px) {
  main,
  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .grid,
  .anime-grid,
  #animeGrid,
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 18px;
  }

  .filters,
  .filterbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .filters input,
  .filters select,
  .filterbar input,
  .filterbar select {
    width: 100%;
  }

  .detail,
  .detail-layout,
  .anime-detail {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
  }
}

/* iPhone 16 Pro / Safari */
@media (max-width: 720px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  header,
  .topbar,
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  main,
  .container {
    width: 100%;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.2px;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .filters,
  .filterbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  .filters input,
  .filters select,
  .filterbar input,
  .filterbar select {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 16px !important;
  }

  .grid,
  .anime-grid,
  #animeGrid,
  .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .card,
  .anime-card,
  .detail-card {
    border-radius: 24px !important;
    overflow: hidden;
  }

  .card img,
  .anime-card img,
  .poster,
  .cover {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  .detail,
  .detail-layout,
  .anime-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .detail h1,
  .detail-card h1,
  .detail-card h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.12 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .statusline,
  .meta {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .links,
  .button-row,
  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .links a,
  .button-row a,
  .actions a,
  .links button,
  .button-row button,
  .actions button {
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
  }

  /* Watchlist / Bewertung iPhone */
  .iphone-watch-box {
    margin-top: 18px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  .iphone-watch-buttons,
  .iphone-rating-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .iphone-watch-buttons button,
  .iphone-rating-buttons button {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
  }

  input[type="text"],
  input[type="number"],
  textarea {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 16px !important;
  }

  button[type="submit"],
  .iphone-save-button {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    margin-top: 10px !important;
  }

  /* Menü kompakter */
  nav a,
  header a {
    font-size: 14px !important;
  }
}

/* iPhone 16 Pro spezielle Breite */
@media (min-width: 390px) and (max-width: 460px) {
  main,
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .hero h1,
  h1 {
    font-size: 40px !important;
  }
}

/* Kleine iPhones */
@media (max-width: 390px) {
  .hero h1,
  h1 {
    font-size: 34px !important;
  }

  main,
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Firefox sauberere Scrollbar */
@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(180,150,255,.55) rgba(255,255,255,.08);
  }
}


/* RATING SINGLE-SELECTION FIX */
.iphone-rating-buttons button.active,
.iphone-watch-buttons button.active {
  background: linear-gradient(135deg, #eb5ee8, #65c8ff) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(235,94,232,.25) !important;
}


/* MEIN ANIME COMMUNITY CHAT */
.my-dashboard {
  display: grid;
  gap: 18px;
}

.my-section h3 {
  margin-top: 0;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.mini-anime {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
}

.mini-anime:hover {
  background: rgba(255,255,255,.09);
}

.mini-anime img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
}

.mini-anime b {
  display: block;
  color: #f5f0ff;
}

.mini-anime small,
.mini-anime span {
  display: block;
  color: #b9c3da;
  margin-top: 4px;
}

.community-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

.chat-list {
  max-height: 520px;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.chat-message {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.chat-message p {
  margin: 6px 0 0;
  color: #e7e9f5;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 14px;
}

.chat-form input {
  min-height: 50px;
  border-radius: 999px;
  padding: 0 16px;
}

.chat-form button {
  min-height: 50px;
  border-radius: 999px;
  padding: 0 22px;
}

.activity-item {
  grid-template-columns: 160px 1fr auto;
}

@media (max-width: 720px) {
  .community-layout {
    grid-template-columns: 1fr;
  }

  .mini-grid {
    grid-template-columns: 1fr;
  }

  .mini-anime {
    grid-template-columns: 64px 1fr;
  }

  .mini-anime img {
    width: 64px;
    height: 86px;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .chat-form button {
    width: 100%;
  }

  .activity-item {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .chat-list {
    max-height: 420px;
  }
}


/* STAR RATING DISPLAY FIX */
.anime-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 7px 10px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(255, 214, 102, .12);
  border: 1px solid rgba(255, 214, 102, .25);
  color: #ffe9a6;
  font-size: 13px;
}

.anime-stars .stars {
  letter-spacing: 1px;
  color: #ffd966;
  font-size: 15px;
}

.anime-stars b {
  color: #fff2bd;
}

.anime-stars small {
  color: #c8bed8;
}

@media (max-width: 720px) {
  .anime-stars {
    font-size: 13px;
    flex-wrap: wrap;
    border-radius: 16px;
  }

  .anime-stars .stars {
    font-size: 16px;
  }
}


/* Swiss language switcher */
#kantham-language-switcher{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(17,24,39,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  color: #fff;
  font-size: 13px;
}

#kantham-language-switcher label{
  opacity: .82;
  white-space: nowrap;
}

#kantham-language-select{
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  padding: 6px 10px;
  outline: none;
  font-size: 13px;
}

#kantham-language-select option{
  color: #111827;
}

@media (max-width: 640px){
  #kantham-language-switcher{
    right: 10px;
    bottom: 10px;
    font-size: 12px;
  }

  #kantham-language-select{
    max-width: 150px;
  }
}