/* copyright.hustled.gg: Ergaenzungen zu style.css der Webseite (wird von hustled.gg geladen).
   Hover wie auf hustled.gg nach dem Vorbild mythictalent.com: 300 ms, leichtes Anheben,
   Rand und Schatten in der Markenfarbe. */

/* Dieselbe Montserrat wie auf hustled.gg, aber von der eigenen Adresse. Die Datei auf
   hustled.gg liegt bei vielen Besuchern noch ohne Freigabe fuer andere Adressen im
   Zwischenspeicher, dann blockt der Browser sie hier und zeigt eine Ersatzschrift.
   Diese Regel steht nach der aus style.css und gewinnt deshalb. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-var.woff2') format('woff2');
}
.crp [hidden] { display: none !important; }

/* ---- Kopf: Logo links, Sprache rechts ---- */
.crp-logo img { display: block; height: 30px; width: auto; }
.crp-lang {
  display: flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.crp-lang a {
  font-size: 13px; font-weight: 700; letter-spacing: .6px; color: #9CA3AF; text-decoration: none;
  padding: 7px 14px; border-radius: 999px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.crp-lang a:hover { color: #ffffff; }
.crp-lang a.on { color: #ffffff; background: linear-gradient(135deg, #A703DE, #610099); }

/* ---- Startseite: zwei Felder mittig ---- */
.crp-start {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: 150px 24px 60px;
}
.crp-choice {
  width: min(1000px, 100%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px);
}
.crp-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  min-height: clamp(250px, 24vw, 330px);
  padding: clamp(28px, 3vw, 46px);
  background: #1A1E24; border: 1px solid rgba(255, 255, 255, .06); border-radius: 24px;
  color: #ffffff; text-decoration: none;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Verlauf im Hintergrund, blendet beim Hovern ein */
.crp-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(191, 0, 255, .22), transparent 60%),
              linear-gradient(to bottom right, rgba(92, 10, 128, .35), rgba(49, 46, 129, .25));
  transition: opacity .3s var(--ease);
}
.crp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(191, 0, 255, .38);
  box-shadow: 0 26px 50px -14px rgba(191, 0, 255, .45);
}
.crp-card:hover::before { opacity: 1; }
.crp-card:focus-visible { outline: 2px solid #BF00FF; outline-offset: 3px; }
.crp-card-icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: auto;
  border-radius: 18px; color: #CC91FF; background: rgba(191, 0, 255, .14); border: 1px solid rgba(191, 0, 255, .28);
}
.crp-card-icon svg { width: 30px; height: 30px; }
.crp-card-title { font-size: clamp(26px, calc(36 / 1920 * 100vw), 36px); font-weight: 800; line-height: 1.15; padding-top: 28px; }
.crp-card-copy { font-size: 16px; line-height: 1.55; color: #9CA3AF; padding-right: 56px; }
.crp-card-go {
  position: absolute; right: clamp(24px, 2.6vw, 40px); bottom: clamp(24px, 2.6vw, 40px);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.crp-card-go svg { width: 20px; height: 20px; }
.crp-card:hover .crp-card-go { background: linear-gradient(135deg, #A703DE, #610099); border-color: transparent; transform: translateX(4px); }
@media (max-width: 760px) {
  .crp-start { padding-top: 120px; align-items: flex-start; }
  .crp-choice { grid-template-columns: 1fr; }
  .crp-card { min-height: 210px; }
}

/* ---- Fuss ---- */
.crp-foot {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px;
  padding: 26px 20px 34px; font-size: 13px; color: #777F93;
}
.crp-foot a { color: #9CA3AF; text-decoration: none; transition: color .2s var(--ease); }
.crp-foot a:hover { color: #ffffff; }

/* ---- Formulare ---- */
.crp-page { padding-bottom: 40px; }
.copyright-form textarea[name="details"] { min-height: 150px; }
.crp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; align-items: start; }
@media (max-width: 640px) { .crp-row { grid-template-columns: 1fr; } }

/* Name mit Partnersuche */
.crp-ac { position: relative; }
.crp-ac input { width: 100%; }
.contact-form .crp-ac input.is-partner,
.contact-form .crp-ac input.is-partner[readonly] {
  padding-right: 88px; color: #ffffff; font-weight: 700; cursor: default;
  background: rgba(191, 0, 255, .1); border-color: rgba(191, 0, 255, .45);
}
.crp-ac-badge { position: absolute; right: 50px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); pointer-events: none; }
.contact-form .crp-ac-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(255, 255, 255, .06);
  color: #C8C8C8; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.crp-ac-clear svg { width: 14px; height: 14px; }
.contact-form .crp-ac-clear:hover { background: rgba(191, 0, 255, .2); color: #ffffff; }
.crp-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; max-height: 290px; overflow: auto;
  background: #232830; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.crp-ac-list li {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 8px;
  font-size: 15px; font-weight: 600; color: #ffffff; cursor: pointer;
}
.crp-ac-list li.on, .crp-ac-list li:hover { background: rgba(191, 0, 255, .18); }
.crp-ac-list img { width: 19px; height: 19px; flex-shrink: 0; }
.crp-ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ausgegraut, solange ein Partner gewaehlt ist: das liegt uns dann schon vor */
.crp-have { display: none; margin-left: 6px; font-size: 12px; font-weight: 600; color: #CC91FF; letter-spacing: 0; }
.crp-lockable.is-locked .crp-have { display: inline; }
.crp-lockable.is-locked .form-label, .form-consent.is-locked > span { color: #6B7280; }
.contact-form .crp-lockable.is-locked input { opacity: .45; cursor: not-allowed; }
.form-consent.is-locked { cursor: default; }

/* Anrede als Auswahlknoepfe */
.crp-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.crp-seg legend { padding: 0; margin-bottom: 8px; }
.crp-seg-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.crp-seg-opts label { position: relative; cursor: pointer; }
.contact-form .crp-seg-opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.crp-seg-opts span {
  display: inline-block; padding: 12px 20px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #C8C8C8;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.crp-seg-opts label:hover span { border-color: rgba(255, 255, 255, .25); }
.crp-seg-opts input:checked + span { color: #ffffff; border-color: #BF00FF; background: rgba(191, 0, 255, .18); }
.crp-seg-opts input:focus-visible + span { outline: 2px solid #BF00FF; outline-offset: 2px; }

/* Kanaele: Plattform anklicken, dann nur den Namen eintragen */
.crp-plats { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-form .crp-plat {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: #ffffff;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  cursor: pointer; transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.crp-plat svg { width: 18px; height: 18px; fill: currentColor; }
.crp-plat i { font-style: normal; font-weight: 800; color: #CC91FF; }
.contact-form .crp-plat:hover { transform: translateY(-2px); border-color: #BF00FF; background: rgba(191, 0, 255, .14); }
.crp-chs { display: flex; flex-direction: column; gap: 10px; }
.crp-chs:empty { display: none; }
.crp-ch { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.crp-ch-plat { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #ffffff; }
.crp-ch-plat svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.crp-ch-in { position: relative; }
.crp-ch-in i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-weight: 700; color: #777F93; pointer-events: none;
}
.contact-form .crp-ch-in input { width: 100%; padding-left: 34px; }
.contact-form .crp-ch-del, .contact-form .crp-files button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .05);
  color: #C8C8C8; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.crp-ch-del svg, .crp-files button svg { width: 15px; height: 15px; }
.contact-form .crp-ch-del:hover, .contact-form .crp-files button:hover { background: rgba(255, 92, 92, .16); border-color: rgba(255, 92, 92, .5); color: #ffffff; }
@media (max-width: 560px) {
  .crp-ch { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .crp-ch-plat span { display: none; }
}

/* Gewaehlte Screenshots */
.crp-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crp-files:empty { display: none; }
.crp-files li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px; color: #C8C8C8;
}
.crp-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-form .crp-files button { width: 32px; height: 32px; flex-shrink: 0; }

/* Erfolgsmeldung: Weg zu Partner werden unter dem Download */
.crp-okhint { margin-top: 18px; font-size: 15px; color: #9CA3AF; }
.crp-okhint a { color: #CC91FF; font-weight: 700; text-decoration: none; }
.crp-okhint a:hover { text-decoration: underline; }

/* Zurueck zur Auswahl, ueber dem Kopfkasten der Unterseiten */
.crp-back {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px;
  padding: 9px 18px 9px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #C8C8C8; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.crp-back svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.crp-back:hover { color: #ffffff; border-color: rgba(191, 0, 255, .5); background: rgba(191, 0, 255, .12); }
.crp-back:hover svg { transform: translateX(-3px); }
.crp-back:focus-visible { outline: 2px solid #BF00FF; outline-offset: 3px; }

/* Suchliste: Alias mit Haken, rechts daneben der maskierte echte Name */
.crp-ac-masked { margin-left: auto; padding-left: 12px; font-size: 13px; font-weight: 500; color: #777F93; letter-spacing: .5px; white-space: nowrap; }

/* Ursprung des Contents: Plattformen mit Symbol, Sonstige mit eigenem Textfeld */
.crp-seg-opts span svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; margin-right: 8px; }
.contact-form .crp-origin input[type="text"] { margin-top: 12px; }

/* Gesperrt, weil ein Partner gewaehlt ist: die Liste der Uploads gleich mit */
.crp-lockable.is-locked .hxup-list { opacity: .45; pointer-events: none; }