/* DreamRP Spielerinterface — Farbwelt aus sh_design.lua / Forum-Stil "DreamRP":
   Grundton #080B1A, Flaechen #0F1428/#0A0E1E, Tuerkis #22D3EE, Violett #A78BFA,
   Magenta #E879F9, Text #E8ECFF, gedimmt #8B93B8. Fest 1200px wie das Forum. */

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

body {
    background: #080B1A url('sternenhimmel.jpg') fixed center / cover;
    color: #E8ECFF;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: #22D3EE; text-decoration: none; }
a:hover { color: #E879F9; }

/* Kopf: zentrierte Wortmarke, Menueleiste darunter — wie im Forum. */
.kopf { text-align: center; padding: 26px 12px 18px; }
.wortmarke { max-width: 399px; width: 80%; height: auto; filter: drop-shadow(0 4px 14px rgba(34, 211, 238, .25)); }

.leiste {
    background: #0A0E1E;
    border-top: 1px solid rgba(34, 211, 238, .35);
    border-bottom: 1px solid rgba(34, 211, 238, .35);
}
.leisteninhalt {
    max-width: 1200px; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.leisteninhalt > a {
    display: inline-block; padding: 11px 14px; color: #E8ECFF; font-weight: 600;
    border-bottom: 2px solid transparent;
}
.leisteninhalt > a:hover { color: #22D3EE; }
.leisteninhalt > a.aktiv { color: #22D3EE; border-bottom-color: #22D3EE; }
.rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.angemeldet { color: #8B93B8; }
.abmelden { color: #8B93B8; font-size: 12px; }

.inhalt { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 22px 16px 40px; }

/* Violett-Balken als Ueberschriften — die Formsprache des Forums. */
.balken {
    background: linear-gradient(90deg, #2E1B54, #4C2A85);
    border-left: 3px solid #22D3EE;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 18px rgba(76, 42, 133, .35);
}
.balken.klein { font-size: 14px; padding: 8px 12px; margin: -18px -18px 14px; border-radius: 6px 6px 0 0; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }

.karte {
    background: rgba(15, 20, 40, .92);
    border: 1px solid rgba(139, 147, 184, .18);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.karte:hover { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 22px rgba(34, 211, 238, .10); }
.karten .karte { margin-bottom: 0; }

table.daten { width: 100%; border-collapse: collapse; }
table.daten th, table.daten td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(139, 147, 184, .12); }
table.daten th { color: #8B93B8; font-weight: 600; white-space: nowrap; }
table.daten tr:last-child th, table.daten tr:last-child td { border-bottom: none; }
.tabellenrahmen { overflow-x: auto; }

.knopf {
    display: inline-block;
    background: linear-gradient(90deg, #22D3EE, #A78BFA);
    color: #06121C;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 6px;
}
.knopf:hover { color: #06121C; filter: brightness(1.12); }

.steamknopf { display: inline-block; line-height: 0; }
.steamknopf img { border-radius: 3px; }
.steamknopf:hover img { filter: brightness(1.15); }

.avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(34, 211, 238, .35);
}
.avatarGross { width: 34px; height: 34px; }

.gedimmt { color: #8B93B8; }
.klein { font-size: 12px; }
.fest { font-family: Consolas, monospace; }
.rang { font-weight: 700; }
.online { color: #22C55E; font-weight: 700; }
.dauerhaft { color: #EF4444; font-weight: 700; }
tr.abgelaufen td { color: #5A6180; }

/* --- Shop ------------------------------------------------------------- */

/* Kopfbereich mit dem Nachtstadt-Banner aus dem Forum. */
.held {
    background: linear-gradient(180deg, rgba(8, 11, 26, .55), rgba(8, 11, 26, .88)),
                url('kopf_banner.jpg') center / cover;
    border: 1px solid rgba(34, 211, 238, .35);
    border-radius: 10px;
    text-align: center;
    padding: 52px 20px 46px;
    margin-bottom: 20px;
    box-shadow: 0 8px 40px rgba(34, 211, 238, .10);
}
.held h1 { font-size: 34px; letter-spacing: .5px; margin-bottom: 10px; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.held p { max-width: 560px; margin: 0 auto; color: #C7CDE8; }
.silber { color: #C6CCD6; text-shadow: 0 0 18px rgba(198, 204, 214, .5); }
.gold   { color: #FFC72C; text-shadow: 0 0 18px rgba(255, 199, 44, .5); }

/* Paketkarten: VIP silbern, VIP+ golden — mit Bildkopf und Glanz. */
.pakete { align-items: stretch; }

/* [NEU 2026-08-15] Abschnitt mit nur EINEM Artikel (bisher: die AWP).
   Ohne das zieht auto-fit die einzelne Karte auf die volle Breite —
   neben den dreispaltigen Abschnitten darueber sah das kaputt aus.
   Die Obergrenze entspricht der Breite einer Messerkarte im Dreierraster. */
.karten.einzelstueck { grid-template-columns: repeat(auto-fit, minmax(320px, 360px)); }

/* Waffenkarte: gleicher Aufbau wie die Messerkarten, nur mit dem
   Tuerkis-Akzent des Hauses statt einer Rangfarbe. */
.paket.waffenkarte { border-color: rgba(34, 211, 238, .38); }
.paket.waffenkarte:hover { border-color: rgba(34, 211, 238, .8); box-shadow: 0 10px 34px rgba(34, 211, 238, .16); }

/* [NEU 2026-08-16] Werkzeugkarte (Advanced Duplicator 2). Eigener Name statt
   Mitbenutzung von .waffenkarte, obwohl der Akzent derselbe ist: ein Werkzeug
   ist keine Waffe, und die beiden Abschnitte sollen sich getrennt umfaerben
   lassen, ohne dass man erst entwirren muss, wer wessen Regel geerbt hat. */
.paket.werkzeugkarte { border-color: rgba(34, 211, 238, .38); }
.paket.werkzeugkarte:hover { border-color: rgba(34, 211, 238, .8); box-shadow: 0 10px 34px rgba(34, 211, 238, .16); }
.paket { position: relative; overflow: hidden; padding-top: 14px; display: flex; flex-direction: column; transition: transform .18s, border-color .18s, box-shadow .18s; }
.paket:hover { transform: translateY(-4px); }
.paket.paketVip { border-color: rgba(198, 204, 214, .45); }
.paket.paketVip:hover { border-color: rgba(198, 204, 214, .8); box-shadow: 0 10px 34px rgba(198, 204, 214, .14); }
.paket.paketVipPlus { border-color: rgba(255, 199, 44, .5); box-shadow: 0 0 24px rgba(255, 199, 44, .08); }
.paket.paketVipPlus:hover { border-color: rgba(255, 199, 44, .85); box-shadow: 0 10px 38px rgba(255, 199, 44, .18); }

.paketbild {
    display: block;
    width: calc(100% + 36px);
    margin: -14px -18px 12px;
    max-width: none;
}
.paketuntertitel { margin-bottom: 4px; }

.band {
    position: absolute;
    top: 18px; right: -44px;
    transform: rotate(38deg);
    background: linear-gradient(90deg, #FFC72C, #E8A200);
    color: #241A00;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 48px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    z-index: 2;
}

ul.vorteile { list-style: none; margin: 6px 0 14px; }
ul.vorteile li { padding: 6px 0 6px 26px; position: relative; border-bottom: 1px solid rgba(139, 147, 184, .1); }
ul.vorteile li:last-child { border-bottom: none; }
ul.vorteile li::before { content: "✔"; position: absolute; left: 2px; color: #22D3EE; }
ul.vorteile.goldhaken li::before { color: #FFC72C; }

/* [GEAENDERT 2026-08-14] Preis und Knopftext duerfen NIE umbrechen ("10"
   ueber dem Eurozeichen sah kaputt aus) — wird die Karte zu schmal, rutscht
   der Knopf stattdessen als Ganzes unter den Preis und fuellt die Breite. */
.paketfuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.preis { font-size: 20px; font-weight: 700; white-space: nowrap; }
.knopf.gross { padding: 12px 22px; font-size: 15px; border-radius: 8px; white-space: nowrap; text-align: center; }
.paketfuss .kaufform, .paketfuss > .knopf { flex: 1 1 auto; }
.paketfuss .kaufform .knopf { display: block; width: 100%; }
.paketfuss > .knopf { display: block; }
.knopf.inaktiv {
    background: #1A2038;
    color: #5A6180;
    cursor: default;
}
.knopf.inaktiv:hover { filter: none; }

/* [HINZUGEFUEGT 2026-08-15] Einmal-Kauf-Regel: unter dem gesperrten Knopf
   steht, warum es diesen Rang fuer dieses Konto nicht mehr zu kaufen gibt. */
.besitzhinweis { margin-top: 8px; text-align: center; }

.fairness .fairpunkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.xpleiste {
    height: 18px;
    background: #0A0E1E;
    border: 1px solid rgba(139, 147, 184, .25);
    border-radius: 9px;
    overflow: hidden;
    margin: 10px 0 8px;
}
.xpstand { height: 100%; background: linear-gradient(90deg, #22D3EE, #E879F9); border-radius: 9px; }

/* --- Shop 2.0: vier Raenge, Messer, Geldspritzen, Bestellungen --------- */

/* Animierter Regenbogen-Text fuer VIP ULTRA — gleiche Idee wie die
   Forum-Klasse dlgUltraName und D.Regenbogen im Spiel. */
.regenbogenText {
    background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e, #38bdf8, #a78bfa, #f43f5e);
    background-size: 600% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    animation: regenbogenLauf 6s linear infinite;
}
@keyframes regenbogenLauf { to { background-position: 600% 0; } }

.karten.vierer { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.rangtitel { font-size: 22px; margin: 2px 0 4px; letter-spacing: .5px; }
.geldbetrag { color: #22C55E; text-shadow: 0 0 16px rgba(34, 197, 94, .35); }

.paket.rangVip          { border-color: rgba(205, 127, 50, .45); }
.paket.rangVip:hover    { border-color: rgba(205, 127, 50, .85); box-shadow: 0 10px 34px rgba(205, 127, 50, .16); }
.paket.rangVipPlus      { border-color: rgba(198, 204, 214, .45); }
.paket.rangVipPlus:hover{ border-color: rgba(198, 204, 214, .85); box-shadow: 0 10px 34px rgba(198, 204, 214, .16); }
.paket.rangVipPlusPlus  { border-color: rgba(255, 199, 44, .5); }
.paket.rangVipPlusPlus:hover { border-color: rgba(255, 199, 44, .9); box-shadow: 0 10px 38px rgba(255, 199, 44, .18); }
.paket.rangVipUltra {
    border-color: rgba(232, 121, 249, .55);
    box-shadow: 0 0 26px rgba(232, 121, 249, .12);
}
.paket.rangVipUltra:hover { border-color: rgba(232, 121, 249, .95); box-shadow: 0 10px 44px rgba(232, 121, 249, .25); }

.hinweisbreit { margin: -6px 0 14px 2px; }

.kaufform { display: inline-block; }
.kaufform .knopf, .messerform .knopf { border: none; cursor: pointer; font-family: inherit; }

.auswahl {
    width: 100%;
    background: #0A0E1E;
    color: #E8ECFF;
    border: 1px solid rgba(139, 147, 184, .35);
    border-radius: 6px;
    padding: 9px 10px;
    margin: 4px 0 10px;
    font-family: inherit;
    font-size: 14px;
}
.auswahl:focus { outline: none; border-color: #22D3EE; }

.statuszeichen {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.statusOffen     { background: rgba(255, 199, 44, .15);  color: #FFC72C; }
.statusBezahlt   { background: rgba(34, 211, 238, .15);  color: #22D3EE; }
.statusGeliefert { background: rgba(34, 197, 94, .15);   color: #22C55E; }
.statusStorniert { background: rgba(139, 147, 184, .15); color: #8B93B8; }

.stornoknopf {
    background: none;
    border: 1px solid rgba(239, 68, 68, .45);
    color: #EF4444;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.stornoknopf:hover { background: rgba(239, 68, 68, .12); }

.knopf.klein2 { padding: 6px 12px; font-size: 12px; border-radius: 6px; margin-right: 6px; }
.aktionen form { display: flex; gap: 6px; flex-wrap: wrap; }

.zahlungshinweis { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 24px rgba(34, 211, 238, .12); }

/* Monatsziel-Balken (dickere XP-Leiste) und die Unterstuetzer-Doppelspalte */
.zielleiste { height: 26px; border-radius: 13px; }
.zielleiste .xpstand { border-radius: 13px; }
.karten.zweier { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.fuss {
    background: #0A0E1E;
    border-top: 1px solid rgba(34, 211, 238, .35);
    text-align: center;
    padding: 16px 12px 20px;
}
.fuss .klein { color: #5A6180; margin-top: 6px; }

@media (max-width: 700px) {
    .rechts { margin-left: 0; }
    .wortmarke { width: 92%; }
}

/* --- Verschenken (2026-08-16) ------------------------------------------ */
/* Ein Kauf fuer jemand anderen aendert die Bedeutung JEDES Kaufknopfes im
   Shop. Deshalb ist das Band kraeftig und steht ganz oben — uebersehen darf
   man es nicht. Die Einladung darunter ist bewusst leiser. */

.geschenkheld {
    background: linear-gradient(180deg, rgba(8, 11, 26, .50), rgba(8, 11, 26, .88)),
                url('geschenk.jpg') center / cover;
}

.geschenkband, .geschenkeinladung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.geschenkband {
    border-color: rgba(232, 121, 249, .55);
    background: linear-gradient(135deg, rgba(232, 121, 249, .14), rgba(34, 211, 238, .08));
    box-shadow: 0 8px 30px rgba(232, 121, 249, .14);
}
.geschenkbandtext { display: flex; flex-direction: column; gap: 3px; min-width: 240px; flex: 1 1 320px; }
.geschenkbandtext strong { color: #E8ECFF; }

.geschenkknoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geschenkknoepfe .kaufform { display: inline-block; margin: 0; }

.geschenkstand { border-color: rgba(34, 211, 238, .45); }
.fehlerkarte   { border-color: rgba(239, 68, 68, .55); }

.suchform { display: flex; gap: 8px; align-items: flex-start; }
.suchform .auswahl { margin: 0; }
.suchform .knopf { white-space: nowrap; }

.avatar.klein { width: 20px; height: 20px; margin-right: 0; }

@media (max-width: 700px) {
    .geschenkband, .geschenkeinladung { flex-direction: column; align-items: flex-start; }
    .suchform { flex-direction: column; }
    .suchform .auswahl, .suchform .knopf { width: 100%; }
}

/* Rollen-Vergleich im Shop (Forum/Discord/TeamSpeak je Rang), 2026-08-16.
   Die Tabelle steht in einem .tabellenrahmen, der schmale Fenster selbst
   seitlich scrollen laesst — deshalb hier eine Mindestbreite, sonst quetscht
   der Browser die vier Rangspalten zu Buchstabensalat. */
.rollenkarte { margin-top: 4px; }
.rollentabelle { min-width: 720px; }
.rollentabelle td.mitte, .rollentabelle th.mitte { text-align: center; white-space: nowrap; }
.rollentabelle th.mitte { font-size: 15px; }
.rollentabelle td:first-child { color: #C7CDF0; }
.rollentabelle .jaZeichen   { color: #22D3EE; font-weight: 700; }
.rollentabelle .neinZeichen { color: #5C6488; }

/* Merkzettel an einer Rang-Bestellung (admin.php): die Rollen in Forum,
   Discord und TeamSpeak muss das Team von Hand setzen. Bewusst auffaellig —
   eine uebersehene Zeile ist hier ein nicht geliefertes Kaufversprechen. */
.handarbeit {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #FFD98A;
    background: rgba(255, 199, 44, .12);
    border: 1px solid rgba(255, 199, 44, .35);
}
.handarbeit strong { color: #FFC72C; }

/* Zwischenueberschrift je Dienst — eine volle Zeile, damit man beim Scrollen
   nicht raet, ob eine Zeile noch zu Discord oder schon zu TeamSpeak gehoert. */
.rollentabelle .dienstzeile th {
    color: #E8ECFF;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    padding-top: 14px;
    background: rgba(139, 147, 184, .07);
}

/* Pflichthaken vor dem Kauf (§ 356 Abs. 5 BGB, seit 2026-08-16).
   Sitzt IM Kaufformular direkt ueber dem Bestellknopf — nicht irgendwo auf
   der Seite: die Zustimmung gehoert sichtbar an die Stelle, an der sie
   abgegeben wird. Volle Breite, damit der Text im schmalen Kartenfuss
   nicht auf drei Zeichen zusammenschnurrt. */
.widerrufhaken {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: rgba(10, 14, 30, .55);
    border: 1px solid rgba(34, 211, 238, .18);
    border-radius: 6px;
    color: #8B93B8;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}
.widerrufhaken input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #22D3EE;
    cursor: pointer;
}
.widerrufhaken strong { color: #E8ECFF; }
.widerrufhaken:hover { border-color: rgba(34, 211, 238, .4); }
/* Der Kartenfuss ist eine Flex-Zeile aus Preis und Formular; das Formular
   selbst muss deshalb zur Spalte werden, sonst landet der Haken NEBEN dem
   Knopf statt darueber. */
.paketfuss .kaufform { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------------
   Gratis-Vergabe des Owners (2026-08-16). Bewusst in Bernstein statt im
   Pink des Verschenkens: der Modus aendert die Bedeutung jedes Kaufknopfes
   auf der Seite, das darf sich nicht wie der normale Weg anfuehlen.
   --------------------------------------------------------------------------- */
.gratisband {
    border-color: rgba(255, 199, 44, .55);
    background: linear-gradient(135deg, rgba(255, 199, 44, .14), rgba(232, 121, 249, .06));
    box-shadow: 0 8px 30px rgba(255, 199, 44, .14);
}
.gratisband strong { color: #FFD98A; }

.knopf.gratisknopf {
    background: linear-gradient(135deg, #FFC72C, #FF9F1C);
    border-color: rgba(255, 199, 44, .65);
    color: #1A1305;
}
.knopf.gratisknopf:hover { filter: brightness(1.08); }

/* Kennzeichen in den Bestelltabellen (admin.php, bestellungen.php) — steht
   dort, wo sonst der Preis steht. */
.gratiszeichen {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #FFD98A;
    background: rgba(255, 199, 44, .12);
    border: 1px solid rgba(255, 199, 44, .35);
}