/* =====================================================================
   ArtistHub — gemeinsames Stylesheet
   Farben und Formen aus den Entwürfen. Diese Datei wird von JEDER
   Seite eingebunden; Farben nie in einzelnen Seiten hart schreiben,
   sondern immer die Variablen unten benutzen.
   ===================================================================== */

:root{
  --bg:#07070f;
  --panel:#0d0d18;
  --card:#12121f;
  --card-soft:#171728;
  --border:#20203a;
  --text:#ecebf5;
  --muted:#8a8aa6;
  --purple:#7c3aed;
  --purple-2:#8b5cf6;
  --purple-soft:#a78bfa;
  --green:#22c55e;
  --red:#ef4444;
  --raza:9px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px}

/* --- Marke ---------------------------------------------------------- */
.brand{
  display:inline-flex;align-items:center;gap:7px;
  font-size:21px;font-weight:700;letter-spacing:-.4px;
}
.brand i{color:var(--purple-2);font-size:22px}
.brand span{color:var(--purple-2)}

/* --- Knöpfe --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--raza);padding:11px 18px;
  font-size:13.5px;font-weight:600;
}
.btn-primar{background:var(--purple);color:#fff}
.btn-primar:hover{background:#6d28d9}
.btn-secundar{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-secundar:hover{background:var(--card-soft)}
.btn-bloc{width:100%}

/* --- Formularfelder ------------------------------------------------- */
.camp{margin-bottom:15px}
.camp label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}

.camp .invelis{position:relative}
.camp .invelis > i{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:#5c5c78;font-size:14px;pointer-events:none;
}
.camp .invelis.cu-icoana input,
.camp .invelis.cu-icoana select{padding-left:36px}

.camp input,
.camp select{
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--raza);
  padding:12px 13px;
  color:var(--text);
  font-size:13.5px;
}
.camp input::placeholder{color:#5c5c78}
.camp select{appearance:none;cursor:pointer}
.camp input:focus,
.camp select:focus{border-color:var(--purple);outline:none}
.camp .sageata{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:11px;pointer-events:none;
}
.camp .ochi{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:#5c5c78;font-size:15px;
}
.camp.eroare input,
.camp.eroare select{border-color:var(--red)}
.camp .mesaj-eroare{font-size:11.5px;color:var(--red);margin-top:5px}

/* --- Kontrollkästchen ----------------------------------------------- */
.acord{display:flex;align-items:flex-start;gap:10px;margin:18px 0 20px}
.acord input[type=checkbox]{
  appearance:none;flex:none;
  width:19px;height:19px;border-radius:5px;
  border:1.5px solid var(--border);background:var(--card);
  cursor:pointer;position:relative;margin-top:1px;
}
.acord input[type=checkbox]:checked{background:var(--purple);border-color:var(--purple)}
.acord input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.acord label{font-size:12.5px;line-height:1.6;color:var(--text)}
.acord a{color:var(--purple-soft)}

/* --- Meldungen ------------------------------------------------------ */
.alerta{
  border-radius:var(--raza);padding:12px 14px;
  font-size:13px;margin-bottom:18px;
  display:flex;align-items:flex-start;gap:10px;
}
.alerta i{font-size:15px;margin-top:1px}
.alerta-rosu{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.alerta-verde{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac}

/* --- Sprachauswahl -------------------------------------------------- */
.limbi{position:absolute;top:20px;right:22px;z-index:5;display:flex;gap:6px}
.limbi a{
  font-size:12px;color:var(--muted);
  padding:5px 10px;border-radius:7px;border:1px solid transparent;
}
.limbi a:hover{background:var(--card);color:var(--text)}
.limbi a.activ{background:var(--card);border-color:var(--border);color:var(--text)}

/* =====================================================================
   Seiten für Konten (Registrierung, Anmeldung)
   Zwei Spalten: links Bild und Slogan, rechts das Formular.
   ===================================================================== */
.cont{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;position:relative}

.cont-stanga{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#1e1b4b,#4c1d95 45%,#831843);
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 52px;
}
/* Eigenes Bild: einfach imagini/hero.jpg ablegen — es liegt dann
   über dem Verlauf. Fehlt die Datei, bleibt der Verlauf sichtbar. */
.cont-stanga::before{
  content:"";position:absolute;inset:0;
  background:url("imagini/hero.jpg") center/cover no-repeat;
  opacity:.55;
}
.cont-stanga::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,15,.15),rgba(7,7,15,.75));
}
.cont-stanga > *{position:relative;z-index:2}
.cont-stanga .brand{font-size:30px;margin-bottom:auto}
.cont-stanga .brand i{font-size:30px}
.slogan{font-size:32px;font-weight:700;line-height:1.28;letter-spacing:-.8px}
.slogan em{color:var(--purple-soft);font-style:normal}
.slogan-sub{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:16px;max-width:390px;line-height:1.6}
.puncte{display:flex;gap:7px;margin-top:34px}
.puncte span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.puncte span.activ{background:var(--purple-2)}

.cont-dreapta{
  display:flex;align-items:center;justify-content:center;
  padding:48px 32px;
}
.formular{width:100%;max-width:400px}
.formular .simbol{
  width:74px;height:74px;border-radius:50%;
  border:2px solid var(--purple);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:var(--purple-2);
  margin:0 auto 20px;
}
.formular h1{font-size:23px;font-weight:700;text-align:center;letter-spacing:-.5px}
.formular .intro{
  font-size:13px;color:var(--muted);text-align:center;
  margin:8px auto 26px;max-width:300px;line-height:1.6;
}
.jos{text-align:center;font-size:12.5px;color:var(--muted);margin-top:20px}
.jos a{color:var(--purple-soft);font-weight:500}

@media (max-width:900px){
  .cont{grid-template-columns:1fr}
  .cont-stanga{min-height:220px;padding:28px 24px;justify-content:flex-end}
  .cont-stanga .brand{font-size:24px;margin-bottom:18px}
  .cont-stanga .brand i{font-size:24px}
  .slogan{font-size:23px}
  .slogan-sub{display:none}
  .puncte{margin-top:18px}
  .cont-dreapta{padding:32px 20px 48px}
  .limbi{top:14px;right:14px}
}

/* Logo auf den Kontoseiten — ersetzt den geschriebenen Namen */
.logo-mare{
  width:230px;max-width:60%;height:auto;display:block;
  margin-bottom:auto;
}
@media (max-width:900px){
  .logo-mare{width:150px;margin-bottom:16px}
}

/* Zeichen statt Icon in der Marke */
.brand-simbol{width:24px;height:24px;object-fit:contain;display:block;flex:none}

/* Nur das Zeichen, ohne Schriftzug */
.brand.doar-simbol{display:block;padding:2px 8px 22px}
.brand.doar-simbol img{width:46px;height:46px;object-fit:contain;display:block}

/* =====================================================================
   Fußzeile
   ===================================================================== */
.subsol{
  margin-top:auto;          /* impinge subsolul la baza ferestrei */
  padding-top:32px;
  border-top:1px solid var(--border);
}
.subsol-sus{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:32px;padding-bottom:28px;
}
.subsol-marca{display:flex;gap:12px;align-items:flex-start}
.subsol-simbol{width:34px;height:34px;object-fit:contain;flex:none}
.subsol-nume{font-size:16px;font-weight:700;letter-spacing:-.3px}
.subsol-nume span{color:var(--purple-2)}
.subsol-slogan{
  font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:6px;max-width:260px;
}
.subsol-coloana{display:flex;flex-direction:column;gap:9px}
.subsol-coloana h4{
  font-size:11px;font-weight:700;color:var(--text);
  letter-spacing:.6px;margin-bottom:3px;
}
.subsol-coloana a{font-size:12.5px;color:var(--muted)}
.subsol-coloana a:hover{color:var(--text)}
.subsol-jos{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding:16px 0 4px;
  font-size:11.5px;color:#5c5c78;
}
.subsol-jos a{color:var(--purple-soft)}

@media (max-width:899px){
  .subsol-sus{grid-template-columns:1fr 1fr;gap:26px}
  .subsol-marca{grid-column:1/-1}
}
@media (max-width:480px){
  .subsol-sus{grid-template-columns:1fr}
}

/* Auf den Textseiten steht der vollständige Rechtehinweis */
.subsol-text{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);line-height:1.8;
}
.subsol-text p{margin-bottom:10px}

/* =====================================================================
   Hintergrund: zwei weiche Lichthöfe in den Ecken.
   Rein dekorativ, liegt hinter allem und fängt keine Klicks ab.
   ===================================================================== */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 760px at 0% 100%, rgba(139,92,246,.34), transparent 68%),
    radial-gradient(700px 700px at 100% 0%, rgba(37,99,235,.28), transparent 68%),
    radial-gradient(520px 520px at 85% 95%, rgba(168,85,247,.14), transparent 70%);
}
body > *{position:relative;z-index:1}

/* Frequenzband am unteren Rand — das Motiv aus dem Logo.
   Liegt hinter allem, fängt keine Klicks ab und wandert sehr
   langsam nach links, damit die Seite lebendig wirkt. */
body::after{
  content:"";
  position:fixed;left:0;right:0;bottom:0;height:190px;
  z-index:0;pointer-events:none;
  background:url("unde.svg") repeat-x left bottom / auto 190px;
  opacity:.42;
  animation:unda 120s linear infinite;
}
@keyframes unda{
  from{background-position-x:0}
  to{background-position-x:-1600px}
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
}
@media (max-width:899px){
  body::after{height:130px;background-size:auto 130px;opacity:.3}
}