:root{
      --accent:#2f6cf6;
      --text:#1a1a1a;
      --glass-chrome-start: rgba(255,255,255,.55);
      --glass-chrome-end: rgba(255,255,255,.28);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.8) 0%, rgba(245,247,255,.9) 40%, transparent 80%),
        linear-gradient(180deg, #f6f7fb 0%, #e9ecf5 100%);
      background-attachment: fixed;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    .chrome{
      position:relative; isolation:isolate;
      background:linear-gradient(180deg,var(--glass-chrome-start),var(--glass-chrome-end));
      -webkit-backdrop-filter:blur(18px) saturate(160%);
      backdrop-filter:blur(18px) saturate(160%);
    }
    header.chrome{
      position: sticky;
      top: 16px;
      z-index: 1000;
      width: min(1280px, 100% - 48px);
      margin: 16px auto;
      border-radius: 999px;
      padding: 14px 40px;
      display:flex;
      align-items:center;
      border: 1px solid rgba(255,255,255,0.35);
      box-shadow: 0 18px 40px rgba(15,23,42,0.12);
    }
    /* Logo-Link (kein Unterstrich im Normalzustand) */
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

/* Logo-Bild im Header */
.logo .pv-logo{
  height:32px;
  width:auto;
  display:block;
}

    .header-actions{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:12px;
      font-size:14px;
      flex-wrap:wrap;
    }
    .header-actions a{
      padding:6px 10px;
      border-radius:999px;
      border:1px solid transparent;
      text-decoration:none!important;
      color:var(--text);
    }
    .header-actions a:hover{
      border-color:rgba(0,0,0,0.06);
      background:rgba(255,255,255,0.7);
    }

    .wrap{max-width:1100px; margin:0 auto; width:100%; padding:80px 20px}
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
      -webkit-backdrop-filter:blur(18px) saturate(140%);
      backdrop-filter:blur(18px) saturate(140%);
      border:1px solid rgba(255,255,255,.35);
      border-radius:22px;
      box-shadow:0 18px 40px rgba(15,23,42,.10);
      padding:32px 26px;
    }
    h1{margin:0 0 10px; font-size:28px}
    .helper-note{
      margin: 6px 0 18px;
      color:#6b7280;
      font-size:14px;
      line-height:1.4;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 26px;
      border-radius:9999px;
      font-size:16px;
      font-weight:600;
      border:none;
      color:#fff;
      background: linear-gradient(90deg, #64748b, #475569);
      box-shadow: 0 10px 24px rgba(71,85,105,.25);
      text-decoration:none;
      transition: transform .2s, box-shadow .2s;
      cursor:pointer;
    }
    .btn:hover{ transform: translateY(-2px); }
    .btn.btn-green{
      background:#22C55E !important;
      color:#fff !important;
    }
    .btn.btn-outline{
      background:rgba(255,255,255,0.8) !important;
      color:#111827 !important;
      border:1px solid rgba(0,0,0,0.10);
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }
    .btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px}
    @media (max-width:640px){
      .btn{width:100%}
    }

    .file-box{
      margin-top: 18px;
      padding: 16px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.75);
      border:1px solid rgba(0,0,0,0.06);
    }
    input[type="file"]{display:block; margin-top:10px}
    .meta{
      margin-top:10px;
      font-size:13px;
      color:#6b7280;
      line-height:1.35;
      white-space:pre-line;
    }
    .preview{
      margin-top:14px;
      display:none;
      gap:14px;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .preview img{
      max-width: 320px;
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 12px 26px rgba(15,23,42,.08);
    }
    .badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;

  background: rgba(246,205,72,.22);     /* gelber Hintergrund */
  color:#1a1a1a;                         /* schwarz */
  border: 1px solid rgba(246,205,72,.55);/* gelber Rand */

  margin-right:8px;
  margin-top:6px;
}

    /* Headline + Icon */
.title-row{
  display: inline-flex;       /* bleibt so breit wie Inhalt */
  align-items: center;        /* Icon + Text vertikal zentriert */
  gap: 12px;                  /* Abstand Icon ↔ Text */
}

.title-row .title-icon{
  width: 54px;   /* ✅ identisch */
  height: auto;  /* ✅ identisch */
}

/* === Gelber Rahmen wie auf den anderen Seiten === */
.panel:hover,
.panel:focus-within{
  border-color:#f6cd48 !important;
  box-shadow:
    0 0 0 3px rgba(246,205,72,.45),
    0 30px 70px rgba(15,23,42,.28);
  transform: translateY(-2px);
}

#t_imgopt_choose{
  white-space: pre-line;
}

/* 📱 Mobile Header – Logo näher an den Rand */
@media (max-width: 640px){

  header.chrome{
    padding: 12px 12px;     /* vorher ~14px 16–40px → weniger Innenrand */
  }

  /* Logo minimal optisch ausbalancieren */
  .logo{
    margin-left: 0;         /* falls irgendwo Margin sitzt → weg */
  }

  .logo .pv-logo{
    margin-left: -2px;      /* Optical alignment (Logo wirkt mittiger) */
  }
}