:root{
  --bg:#0b1020;
  --panel:#121a33;
  --panel-2:#0f1730;
  --text:#e8ecff;
  --muted:#b8c0e6;
  --border:rgba(232,236,255,.10);
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --radius:16px;
  --max:1100px;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(74,110,255,.18), transparent 60%),
    radial-gradient(900px 600px at 95% 20%, rgba(130,87,229,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* Layout */
.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.page{ padding:22px 0 34px; }

/* Topbar (NICHT sticky/fixed -> verschwindet beim Scrollen) */
.topbar{
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  background:rgba(11,16,32,.75);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}

.top-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand{
  font-weight:800;
  letter-spacing:.3px;
  text-decoration:none;
  color:var(--text);
  white-space:nowrap;
}

.user-badge{
  color:var(--muted);
  font-size:.92rem;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(232,236,255,.06);
  white-space:nowrap;
  max-width:40vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Desktop navigation */
.nav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.auth-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.nav-link{
  text-decoration:none;
  color:var(--muted);
  border:1px solid transparent;
  padding:10px 12px;
  border-radius:999px;
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
}

.nav-link:hover{
  color:var(--text);
  border-color:var(--border);
  background:rgba(232,236,255,.06);
}

.nav-link.active{
  color:var(--text);
  border-color:var(--border);
  background:rgba(232,236,255,.10);
}

/* Hero / Typography */
.hero{ padding:18px 0 8px; }

h1{
  margin:0 0 8px;
  font-size:clamp(1.6rem, 2.3vw, 2.1rem);
  letter-spacing:.2px;
}

.subtitle{
  margin:0;
  color:var(--muted);
  font-size:.98rem;
  max-width:70ch;
}

/* Grid + Cards */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:16px;
}

@media (min-width:900px){
  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:18px;
  }
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.10);
}

.card h2{
  margin:0;
  font-size:1.15rem;
  letter-spacing:.2px;
}

.meta{
  color:var(--muted);
  font-size:.95rem;
  white-space:nowrap;
}

.empty{
  margin:0;
  padding:16px 18px;
  color:var(--muted);
}

/* Lists */
.list{
  margin:0;
  padding:0;
  list-style:none;
}

.list-row{
  padding:12px 18px;
  border-top:1px solid var(--border);
}

.list-row:first-child{ border-top:none; }

.name{
  font-weight:600;
  letter-spacing:.1px;
}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:16px 0 24px;
  color:var(--muted);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.muted{ color:var(--muted); }

/* Forms + buttons + messages */
.form{
  display:grid;
  gap:12px;
  max-width:520px;
}

.field{ display:grid; gap:6px; }

.label{
  color:var(--muted);
  font-size:.95rem;
}

input,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(232,236,255,.06);
  color:var(--text);
  outline:none;
  min-height:44px;
  font-size:16px;
}

input:focus,select:focus{
  border-color:rgba(232,236,255,.22);
  background:rgba(232,236,255,.08);
}

.btn{
  width:fit-content;
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(232,236,255,.10);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}

.btn:hover{ background:rgba(232,236,255,.14); }

.btn-danger{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.btn-danger:hover{ background:rgba(255,255,255,.10); }

/* Primary button */
.btn-primary{
  background: rgba(232,236,255,0.18);
  border-color: rgba(232,236,255,0.20);
}

.error,.ok{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
}

/* Tables */
.table-wrap{
  overflow-x:auto;
  max-width:100%;
}

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}

.table th,.table td{
  text-align:left;
  padding:10px 12px;
  border-top:1px solid var(--border);
  vertical-align:top;
}

.table thead th{
  border-top:none;
  background:rgba(0,0,0,.12);
  color:var(--muted);
  font-weight:600;
  font-size:.95rem;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Bottom navigation (default off, enabled on mobile) */
.nav-bottom{ display:none; }

/* Voting rows */
.vote-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.vote-left{ min-width:0; }

.vote-meta{
  color: var(--muted);
  font-size: .9rem;
  margin-top: 2px;
}

.vote-form{ margin:0; }

.vote-row.mine{
  background: rgba(232,236,255,0.06);
}

/* Mini results */
.mini-results{
  display:grid;
  gap:8px;
  padding:10px;
}

.mini-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.03);
}

.mini-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mini-votes{
  color: var(--muted);
  font-weight:700;
}

.mini-tag{
  margin-left:8px;
  color: var(--muted);
  font-size:.85rem;
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:999px;
}

/* Hall of Fame – Gewinnergerichte (klickbare Card) */
.hof-dish,
.hof-dish:visited,
.hof-dish:hover,
.hof-dish:active{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.03);

  color:var(--text);
  text-decoration:none;
}

.hof-dish:hover{
  background: rgba(232,236,255,0.06);
  transform: translateY(-1px);
}

.hof-dish:focus-visible{
  outline:2px solid rgba(232,236,255,0.28);
  outline-offset:2px;
}

.hof-dish *{
  color:inherit;
  text-decoration:none;
}

.hof-dish-name{
  font-weight:600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hof-dish-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
  font-size:0.9rem;
  color:var(--muted);
}

.hof-votes{
  font-weight:700;
  color:var(--muted);
}

.hof-badge{
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:999px;
  font-size:.85rem;
  color:var(--text);
  background: rgba(232,236,255,0.10);
}

.hof-badge.muted{ opacity:.75; }

/* Hall of Fame – Voting Liste links (klickbare Card Rows) */
.hof-vote-row,
.hof-vote-row:visited,
.hof-vote-row:hover,
.hof-vote-row:active{
  display:block;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration:none;
  margin:10px; /* Desktop/Tablet Luft */
}

.hof-vote-row:hover{
  background: rgba(232,236,255,0.06);
  transform: translateY(-1px);
}

.hof-vote-row:focus-visible{
  outline:2px solid rgba(232,236,255,0.28);
  outline-offset:2px;
}

.hof-vote-row.active{
  background: rgba(232,236,255,0.10);
  border-color: rgba(232,236,255,0.22);
}

.hof-vote-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.hof-vote-title{
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hof-vote-tags{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.hof-vote-meta{
  margin-top:6px;
  color: var(--muted);
  font-size: .9rem;
}

/* -------------------------------
   MOBILE (alles gesammelt)
   ------------------------------- */
@media (max-width: 899px){

  /* Body Platz für Bottom-Navi */
  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
  }

  /* Desktop-Navbar am Handy aus */
  .nav-top{ display:none !important; }

  /* Bottombar am Handy an */
  .nav-bottom{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap:14px;

    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    z-index:1000;

    padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));

    background:rgba(11,16,32,.92);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--border);

    border-radius:18px 18px 0 0;
  }

  .nav-bottom a{
    min-width:72px;
    min-height:44px;
    padding:8px 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    color:var(--muted);
    font-size:.88rem;
    border-radius:14px;
  }

  .nav-bottom a.active{
    color:var(--text);
    background:rgba(232,236,255,.12);
  }

  /* Voting Button – hervorgehoben */
  .nav-vote{
    min-width:86px;
    min-height:52px;
    font-weight:700;
    font-size:.95rem;
    color:var(--text);

    background:linear-gradient(135deg, rgba(130,87,229,.45), rgba(74,110,255,.45));
    border:1px solid rgba(232,236,255,.35);
    box-shadow:0 8px 24px rgba(0,0,0,.45);

    transform:translateY(-6px);
  }

  .nav-vote.active{
    background:linear-gradient(135deg, rgba(130,87,229,.65), rgba(74,110,255,.65));
  }

  /* Hall of Fame: "Screen Switch" Liste/Detail */
  .hof-grid{
    grid-template-columns:1fr !important;
  }

  .hof-grid[data-mobile-view="list"] .hof-pane-detail{
    display:none;
  }

  .hof-grid[data-mobile-view="detail"] .hof-pane-list{
    display:none;
  }

  .hof-grid[data-mobile-view="detail"] .hof-mobile-back{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:10px;
  }

  /* Mini-results etwas luftiger + sicher gegen Überlauf */
  .mini-results{
    padding:6px;
  }

  /* Voting Cards dürfen nicht über den Container laufen */
  .hof-vote-row{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:8px 0; /* ersetzt das Desktop margin:10px */
  }

  .hof-pane-list,
  .hof-pane-list *{
    max-width:100%;
  }

  /* Voting Cards: mobile Layout (Titel + Tags untereinander) */
  .hof-vote-top{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .hof-vote-title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.2;
  }

  .hof-vote-tags{
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }

  .hof-vote-meta{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Tablet/Desktop Bottom-Navi Breakpoint wie vorher */
@media (max-width: 820px){
  /* nav-bottom bleibt an (bereits in 899px geregelt), aber du hattest den Breakpoint so */
}




.comment-media{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.comment-media a{
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,0.03);
}

.comment-media img{
  display:block;
  width:110px;
  height:110px;
  object-fit:cover;
}


/* -----------------------------------
   Hall of Fame – Kommentar-UI polish
   ----------------------------------- */

.comment-form{
  margin:0 0 12px 0;
  display:grid;
  gap:12px;
}

.comment-textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(232,236,255,0.06);
  color: var(--text);
  outline:none;
  font-size:16px;
  line-height:1.35;
  resize: vertical;
  min-height: 92px;
}

.comment-textarea:focus{
  border-color: rgba(232,236,255,0.22);
  background: rgba(232,236,255,0.08);
}

.upload-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
}

.upload-input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.upload-card{
  flex: 1 1 260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;

  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(232,236,255,0.22);
  background: rgba(255,255,255,0.03);
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  color: var(--text);
}

.upload-card:hover{
  background: rgba(232,236,255,0.06);
  border-color: rgba(232,236,255,0.30);
}

.upload-title{
  font-weight:700;
}

.upload-sub{
  color: var(--muted);
  font-size:.92rem;
}

.upload-actions{
  display:flex;
  align-items:center;
}

.upload-hint{
  color: var(--muted);
  font-size:.92rem;
  margin-top:-4px;
}

.upload-list{
  display:grid;
  gap:8px;
}

.upload-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.03);
}

.upload-item-left{
  min-width:0;
}

.upload-fn{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 60vw;
}

.upload-meta{
  color: var(--muted);
  font-size:.88rem;
  margin-top:2px;
}

.upload-remove{
  border:1px solid var(--border);
  background: rgba(232,236,255,0.08);
  color: var(--text);
  border-radius: 999px;
  padding:8px 10px;
  cursor:pointer;
  min-height:40px;
  font-weight:600;
}

.upload-remove:hover{
  background: rgba(232,236,255,0.12);
}

/* Mobile: Buttons/Upload nice stacking */
@media (max-width: 899px){
  .upload-actions{
    width:100%;
  }
  .upload-actions .btn{
    width:100%;
    justify-content:center;
  }
  .upload-fn{
    max-width: 72vw;
  }
}


/* -----------------------------------
   Rezept: Layout + Foto
   ----------------------------------- */

.recipe-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:18px;
  align-items:start;
}

.recipe-photo{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow);
}

.recipe-photo img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}

.recipe-photo-empty{
  padding:16px;
  color:var(--muted);
}

/* Upload UI (wie Comments) */
.recipe-upload-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  margin-top:10px;
}

.recipe-upload-input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.recipe-upload-card{
  flex: 1 1 260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;

  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(232,236,255,0.22);
  background: rgba(255,255,255,0.03);
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  color: var(--text);
}

.recipe-upload-card:hover{
  background: rgba(232,236,255,0.06);
  border-color: rgba(232,236,255,0.30);
}

.recipe-upload-title{ font-weight:700; }
.recipe-upload-sub{ color:var(--muted); font-size:.92rem; }

.recipe-upload-hint{
  color: var(--muted);
  font-size:.92rem;
  margin-top:8px;
}

/* Mobile: Foto über Portionenwahl */
@media (max-width: 899px){
  .recipe-grid{
    grid-template-columns:1fr;
  }

  .recipe-photo{
    order:-1; /* Foto nach oben */
  }
}

/* Rezept: Foto exakt rechts neben Zutatenliste (Desktop), auf Mobile oben volle Breite */
.recipe-ingredients-layout{
  display:grid;
  grid-template-columns: 1fr 360px; /* Zutaten links, Foto rechts */
  gap:18px;
  align-items:start;
  margin-top: 10px;
}

.recipe-ingredients{
  min-width:0; /* wichtig, damit Tabellen nicht überlaufen */
}

.recipe-ingredients #ingredientsTable{
  max-width:100%;
  overflow-x:auto; /* falls Tabelle breit wird */
}

.recipe-photo{
  position: sticky;
  top: 14px; /* optional: bleibt beim Scrollen sichtbar */
}

/* Mobile: Foto zuerst, volle Breite, dann erst Portionen/Zutaten */
@media (max-width: 899px){
  .recipe-ingredients-layout{
    grid-template-columns: 1fr;
  }

  .recipe-photo{
    position: static;
    order: -1; /* Foto nach oben */
    width: 100%;
  }

  .recipe-photo img{
    width:100%;
    max-height: 360px;
  }
}

.btn-small{
  padding:8px 10px;
  min-height:38px;
  border-radius:999px;
  font-size:.9rem;
}

.comment-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.comment-admin-actions{
  margin:0;
}

.comment-media-item{
  display:flex;
  flex-direction:column;
  gap:8px;
}


/* Navigation Badge */
.nav-with-badge{
    position: relative;
}

.nav-badge{
    position:absolute;
    top:-6px;
    right:-10px;

    width:10px;
    height:10px;

    background:#e53935;
    border-radius:50%;
    box-shadow:0 0 0 2px var(--bg);
}

/* Blink nur für Admin */
.blink{
    animation: navBlink 1.6s infinite;
}

@keyframes navBlink{
    0%   { transform: scale(1);   opacity:1; }
    50%  { transform: scale(1.25); opacity:.6; }
    100% { transform: scale(1);   opacity:1; }
}


/* Breadcrumbs – klickbar aber optisch wie Text */
.breadcrumb{
  font-size: 0.95rem;
  color: var(--text-muted, #666);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.breadcrumb-link{
  color: inherit;              /* gleiche Farbe wie Text */
  text-decoration: none;       /* keine Unterstreichung */
  cursor: pointer;
}


.breadcrumb-sep{
  opacity: 0.6;
}

.breadcrumb-current{
  font-weight: 500;
  color: inherit;
}


/* Media Viewer / Lightbox */
.no-scroll { overflow: hidden; }

.media-viewer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.media-viewer.open{ display: block; }

.media-viewer-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
}

.media-viewer-content{
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 86vh;
  margin: 7vh auto 0 auto;
  padding: 12px;
  border-radius: 16px;
  background: rgba(18,18,18,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.5);
}

.media-viewer-close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
}

.media-viewer-close:hover{
  background: rgba(255,255,255,.18);
}

.media-viewer-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
}

/* Thumbnails: als Button ohne Standard-Button-Optik */
.media-thumb{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}

.media-thumb:focus{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* =========================
   Extracted inline styles
   ========================= */

.u-09d2b0{ margin-top: 18px; }
.u-72e058{ padding: 12px 18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.u-8fdce8{ text-decoration:none; }
.u-57489d{ padding: 16px 18px; }
.u-816f83{ margin:0 0 12px 0; }
.u-6bfc6c{ margin:0 0 16px 0; }
.u-abf933{ margin-top: 14px; }
.u-a94c00{ margin-bottom:8px; font-weight:700; }
.u-26dd46{ padding:0; }
.u-38bd08{ max-width:520px; }
.u-82e88f{ margin-top:18px; }
.u-b30e2c{ margin-bottom:8px; }
.u-bcc0bd{ padding: 14px 18px; }
.u-46dcee{ margin-top: 12px; }
.u-3f7e5f{ display:flex; gap:10px; flex-wrap:wrap; }
.u-1a67cf{ margin:0; }
.u-1a6e7e{ margin-top: 10px; }
.u-219b7e{ display:flex; align-items:center; gap:8px; }



/* ================================
   Polished Select / Dropdown
   ================================ */

select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  min-height: 44px;

  padding: 10px 42px 10px 14px; /* Platz für Pfeil rechts */
  border-radius: 12px;

  font-family: inherit;
  font-size: 15px;
  font-weight: 500;

  color: var(--text);
  background-color: rgba(0,0,0,.22);

  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);

  cursor: pointer;

  /* eleganter Pfeil */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:hover{
  border-color: var(--line-2);
  background-color: rgba(0,0,0,.28);
}

select:focus{
  outline: none;
  border-color: rgba(199,168,106,.55); /* Gold-Akzent */
  box-shadow: var(--focus);
}

/* Disabled */
select:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Options (Browser-abhängig, dezent halten) */
select option{
  color: #111;
  background: #fff;
  font-weight: 500;
}