MediaWiki:Common.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* =================================
   CHARACTER PROFILE - "ROYAL FRAME" (SAFE MODE)
   ================================= */

.char-card {
    position: relative;
    display: flex;
    gap: 20px;
    background-color: #fcfcfc;
    padding: 40px; /* Platz für die Ecken */
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #333;
    max-width: 1100px;
    margin: 1em 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);

    /* --- HIER MALEN WIR DIE LINIEN (Als feste Blöcke) --- */
    background-image:
        /* === OBEN LINKS === */
        /* Dicke Linie (Horizontal & Vertikal) */
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),
        /* Feine Linie (Horizontal & Vertikal) */
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),

        /* === OBEN RECHTS === */
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),

        /* === UNTEN LINKS === */
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),

        /* === UNTEN RECHTS === */
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b),
        linear-gradient(#b8860b, #b8860b), linear-gradient(#b8860b, #b8860b);

    /* --- GRÖSSE DER LINIEN (Breite x Höhe) --- */
    background-size:
        /* OL: Dick (50px lang, 3px breit) / Fein (35px lang, 1px breit) */
        50px 3px, 3px 50px,  35px 1px, 1px 35px,
        /* OR: Dick / Fein */
        50px 3px, 3px 50px,  35px 1px, 1px 35px,
        /* UL: Dick / Fein */
        50px 3px, 3px 50px,  35px 1px, 1px 35px,
        /* UR: Dick / Fein */
        50px 3px, 3px 50px,  35px 1px, 1px 35px;

    /* --- POSITION DER LINIEN --- */
    background-position:
        /* OBEN LINKS: 0/0 ist die Ecke, 8px/8px ist der Abstand der feinen Linie */
        0 0,  0 0,    8px 8px,  8px 8px,

        /* OBEN RECHTS: 100% 0 ist die Ecke */
        100% 0, 100% 0,   calc(100% - 8px) 8px, calc(100% - 8px) 8px,

        /* UNTEN LINKS: 0 100% ist die Ecke */
        0 100%, 0 100%,   8px calc(100% - 8px), 8px calc(100% - 8px),

        /* UNTEN RECHTS: 100% 100% ist die Ecke */
        100% 100%, 100% 100%, calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);

    background-repeat: no-repeat;
}

/* Schrift-Reset */
.char-card, .char-card * {
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

/* --- LINKE SPALTE --- */
.cc-left {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cc-image-box {
    border: none;
    background: #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    line-height: 0;
}
.cc-image-box img { width: 100%; height: auto; display: block; }

.cc-name-badge {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}
.cc-name {
    font-size: 1.6em !important;
    font-weight: 800 !important;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    line-height: 1.1;
}
.cc-subtitle {
    font-size: 0.9em !important;
    color: #666;
    font-style: italic;
    border-top: 1px solid #ccc;
    padding-top: 8px;
    margin-top: 8px;
}

/* --- RECHTE SPALTE --- */
.cc-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-data-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    min-height: 38px;
}

.cc-label {
    flex: 0 0 140px;
    background: #eef2f5;
    color: #555;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.8em !important;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    border-right: 1px solid #ddd;
    letter-spacing: 0.5px;
}

.cc-value {
    padding: 8px 15px;
    font-weight: 600 !important;
    color: #000;
    flex: 1;
    font-size: 0.95em !important;
}

.cc-header {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #b8860b;
    border-bottom: 1px dashed #bbb;
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cc-text {
    line-height: 1.6;
    color: #333;
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    text-align: justify;
    hyphens: auto;
}

/* LINKS */
.char-card a, .char-card a:visited, .char-card a.mw-redirect {
    color: #b8860b !important;
    text-decoration: none;
    font-weight: bold !important;
    transition: color 0.2s;
}
.char-card a:hover {
    color: #000000 !important;
    text-decoration: underline;
    background-color: rgba(184, 134, 11, 0.1);
}
.char-card a.new { color: #cc0000 !important; }

/* MOBILE */
@media (max-width: 800px) {
    .char-card { flex-direction: column; padding: 30px 20px; }
    .cc-left { flex: auto; width: 100%; }
}