/*
 * LANXESS-Erscheinungsbild.
 *
 * Farben aus der Website-CSS von lanxess.com, Wortbild aus den Datenblatt-
 * vorlagen. Die Hausschrift "Lanxess" ist proprietaer; die Website selbst
 * faellt auf Open Sans zurueck, das hier mitgeliefert wird - so entstehen
 * keine Abrufe bei Dritten.
 */
@font-face {
    font-family: "Open Sans";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/open-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/open-sans-600.woff2") format("woff2");
}
@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/open-sans-700.woff2") format("woff2");
}

:root {
    --rot: #e5252f;
    --rot-dunkel: #a4001c;
    /* Das Rot des Wortbilds ist heller und bleibt der Zierde vorbehalten:
       auf Weiss erreicht es nur 4,27:1 und traegt keinen Fliesstext. */
    --rot-marke: #f11a29;
    --blau: #0072c2;
    --text: #1a1919;
    --linie: #d2d2d2;
    --flaeche: #f2f2f2;
    --flaeche-hell: #f7f7f7;
    /* LANXESS setzt #878787; das ergibt auf Weiss nur 3,59:1. Abgedunkelt
       auf 4,54:1, damit Nebentexte lesbar bleiben. */
    --grau: #767676;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Open Sans", Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 24px;
    border-bottom: 3px solid var(--rot);
    background: #fff;
}

.marke { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--text); flex: none; }
.marke img { height: 24px; width: auto; display: block; }
.marke span { font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.anwender { display: flex; align-items: center; gap: 14px; color: var(--grau); font-size: 14px; flex: none; white-space: nowrap; }
.anwender form { margin: 0; }

main { padding: 24px; max-width: 1440px; margin: 0 auto; }

a { color: var(--rot-dunkel); }
a:hover { color: var(--rot); }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; }

.sprungmarke {
    position: absolute; left: -9999px;
    background: var(--rot); color: #fff; padding: 10px 16px; z-index: 10;
}
.sprungmarke:focus { left: 8px; top: 8px; color: #fff; }

.sortierung { color: inherit; text-decoration: none; display: inline-block; }
.sortierung:hover { color: var(--rot-dunkel); }
.sortierung.aktiv { color: var(--rot-dunkel); }
td.leer { color: var(--grau); padding: 24px 10px; }

/* Fassungen und Freigaben */
.historie { margin-top: 32px; border-top: 1px solid var(--linie); padding-top: 20px; }
.historie h2 {
    font-size: 12px; margin: 0 0 14px; color: var(--grau);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.fassungen { list-style: none; margin: 0; padding: 0; }
.fassungen li { border-left: 2px solid var(--linie); padding: 0 0 16px 16px; position: relative; }
.fassungen li::before {
    content: ""; position: absolute; left: -5px; top: 6px;
    width: 8px; height: 8px; background: var(--rot); border-radius: 50%;
}
.fassung-kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fassung-nr { font-weight: 700; }
.fassung-status {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    border: 1px solid currentColor; border-radius: 2px; padding: 0 6px;
}
.fassung-gueltig { color: #1a7f37; }
.fassung-ueberholt { color: var(--grau); }
.fassung-offen { color: var(--blau); }
.fassung-pdf { font-size: 13px; margin-left: auto; }
/* Ueberholte Fassungen treten zurueck, bleiben aber lesbar. */
.fassungen li:has(.fassung-ueberholt) .grund { color: var(--grau); }
.grund { margin: 4px 0 0; }
.entscheid { margin: 4px 0 0; font-size: 14px; }
.entscheid-approved { color: #1a7f37; }
.entscheid-rejected { color: var(--rot-dunkel); }
.entscheid-offen { color: var(--blau); }
.anmerkung { color: var(--grau); font-style: italic; }

.einreichen { margin-top: 16px; padding: 14px 16px; background: var(--flaeche-hell); border-left: 3px solid var(--rot); }
.einreichen label { display: block; font-size: 13px; color: var(--grau); margin-bottom: 6px; font-weight: 600; }
.einreichen-zeile { display: flex; gap: 8px; }
.einreichen-zeile input {
    flex: 1; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 2px; font: inherit;
}
.einreichen small { margin-top: 6px; display: block; }

.pdf-fehler { padding: 32px 24px; text-align: center; color: var(--text); }
.pdf-fehler h1 { font-size: 18px; }
.pdf-fehler p { margin: 0 0 12px; }

button, .knopf {
    border: 1px solid var(--rot);
    background: var(--rot);
    border-radius: 2px;
    padding: 7px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}
button:hover, .knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }

/* Zweitrangige Handlungen treten zurueck, damit das Rot Gewicht behaelt. */
button.still, .knopf.still {
    background: #fff; color: var(--text); border-color: var(--linie); font-weight: 400;
}
button.still:hover, .knopf.still:hover { background: var(--flaeche); color: var(--text); border-color: var(--grau); }

:focus-visible { outline: 2px solid var(--rot-dunkel); outline-offset: 2px; }

input, select, textarea { border-radius: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rot-dunkel); outline-offset: 0; border-color: transparent; }

/* Anmeldung */
.anmeldung { max-width: 360px; margin: 72px auto; }
.anmeldung h1 { margin-bottom: 20px; }
.anmeldung form { display: flex; flex-direction: column; gap: 6px; }
.anmeldung label { font-size: 14px; color: var(--grau); margin-top: 8px; }
.anmeldung input[type=email], .anmeldung input[type=password] {
    padding: 9px; border: 1px solid var(--linie); border-radius: 2px; font: inherit;
}
.anmeldung .merken { display: flex; align-items: center; gap: 6px; }
.anmeldung button { margin-top: 14px; }
.firmenkonto { display: block; text-align: center; padding: 10px 12px; }
.trenner { display: flex; align-items: center; gap: 10px; color: var(--grau); font-size: 13px; margin: 18px 0 4px; }
.trenner::before, .trenner::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.fehler { color: var(--rot-dunkel); }
.hinweis { color: var(--grau); font-size: 13px; margin-top: 24px; }
.hinweis-klein { color: var(--grau); font-size: 13px; }

/* Übersicht */
.filter { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; background: var(--flaeche-hell); border: 1px solid var(--linie); }
.filter label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grau); }
.filter select, .filter input { padding: 7px; border: 1px solid var(--linie); border-radius: 2px; font: inherit; background: #fff; }
.filter .suche input { min-width: 260px; }
.filter .ankreuz { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.anzahl { color: var(--grau); font-size: 13px; margin: 0 0 8px; }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); }
table.liste th {
    font-size: 12px; color: var(--grau); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 2px solid var(--text);
}
table.liste tbody tr:hover { background: var(--flaeche-hell); }
/* Eine ganze Spalte in Rot wuerde die Akzentfarbe entwerten. */
table.liste td a { font-weight: 600; text-decoration: none; color: var(--text); }
table.liste td a:hover { color: var(--rot-dunkel); text-decoration: underline; }
table.liste .nummer { color: var(--grau); font-variant-numeric: tabular-nums; }

/* Detail */
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.kopfzeile h1 { margin: 0 0 4px; font-size: 24px; }
.kopfzeile h1 sup { font-size: 0.6em; }
.meta { margin: 0; color: var(--grau); font-size: 13px; }
.aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; }
.baustein { border-top: 1px solid var(--linie); padding: 14px 0; }
.baustein h2 {
    font-size: 12px; margin: 0 0 8px; color: var(--grau);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.baustein p { margin: 0 0 8px; }
.baustein ul { margin: 0 0 8px; padding-left: 20px; }
.bildverweis { color: var(--grau); font-size: 13px; font-style: italic; }
.grafik { margin: 8px 0 12px; text-align: center; }
.grafik img { max-width: 100%; height: auto; }
.grafik.klein img { max-height: 180px; }
.grafik figcaption { margin-top: 4px; }

table.inhalt { border-collapse: collapse; width: 100%; margin: 4px 0 10px; font-size: 14px; }
table.inhalt th, table.inhalt td {
    border: 1px solid var(--linie); padding: 5px 8px; text-align: left; vertical-align: top;
}
table.inhalt th { background: var(--flaeche); font-weight: 600; }

.vorschau { position: sticky; top: 16px; height: calc(100vh - 150px); }
.vorschau iframe { width: 100%; height: 100%; border: 1px solid var(--linie); border-radius: 2px; background: var(--flaeche); }

@media (max-width: 1000px) {
    .zweispaltig { grid-template-columns: 1fr; }
    .vorschau { position: static; height: 70vh; }
}

/* Bearbeiten */
.knopf-still {
    border: 1px solid var(--linie); background: #fff; color: var(--text);
    padding: 7px 16px; border-radius: 2px; text-decoration: none;
}
.knopf-still:hover { background: var(--flaeche); border-color: var(--grau); color: var(--text); }
.meldung { background: var(--flaeche-hell); border-left: 3px solid var(--rot); padding: 10px 14px; margin: 16px 0 0; }
ul.fehler { background: var(--flaeche-hell); border-left: 3px solid var(--rot-dunkel); padding: 10px 14px 10px 32px; margin: 16px 0 0; }

.maske { border-top: 1px solid var(--linie); padding-top: 16px; margin-top: 16px; }
.maske h2 {
    font-size: 12px; margin: 0 0 14px; color: var(--grau);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.maske label { display: block; font-size: 13px; color: var(--grau); margin-bottom: 14px; }
.maske input[type=text], .maske input[type=date] {
    display: block; width: 100%; margin-top: 4px; padding: 8px;
    border: 1px solid var(--linie); border-radius: 2px; font: inherit; color: var(--text);
}
.maske small { display: block; margin-top: 3px; font-size: 12px; }
.maske textarea {
    width: 100%; padding: 8px; border: 1px solid var(--linie); border-radius: 2px;
    font: inherit; line-height: 1.45; resize: vertical;
}
.maske textarea:disabled { background: var(--flaeche); color: var(--grau); }
.maske .baustein h3 { font-size: 14px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.maske button { margin-top: 14px; }
.maske code { background: var(--flaeche); padding: 1px 5px; border-radius: 2px; font-size: 12px; }

/* Masken fuer Tabellen, Listen und Eigenschaften */
.baustein-maske { margin: 4px 0 10px; }
table.eingabe { width: 100%; border-collapse: collapse; }
table.eingabe th {
    text-align: left; font-size: 11px; color: var(--grau); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px 4px 0;
}
table.eingabe td { padding: 0 4px 4px 0; vertical-align: top; }
table.eingabe input[type=text] {
    width: 100%; padding: 6px 7px; border: 1px solid var(--linie);
    border-radius: 2px; font: inherit; font-size: 14px;
}
table.eingabe tr.vorlage input[type=text] { border-style: dashed; color: var(--grau); }
table.eingabe tr.vorlage input[type=text]:focus { border-style: solid; color: var(--text); }
table.eingabe .schmal { width: 64px; }
table.eingabe .mittig { text-align: center; padding-top: 8px; }
table.eingabe .streichen { width: 26px; text-align: center; padding-top: 7px; }
table.eingabe .streichen label { cursor: pointer; color: var(--grau); font-size: 13px; }
table.eingabe .streichen input { position: absolute; opacity: 0; }
table.eingabe .streichen input:checked + span { color: var(--rot-dunkel); font-weight: 700; }
table.eingabe .streichen input:checked ~ * { color: var(--rot-dunkel); }
table.eingabe .streichen input:focus-visible + span { outline: 2px solid var(--rot-dunkel); outline-offset: 2px; }
table.eingabe .streichen input:checked { position: absolute; }
tr:has(.streichen input:checked) input[type=text] { text-decoration: line-through; color: var(--grau); }
table.kennzahlen input[type=text] { font-size: 13px; }
.knopf.klein, button.klein { padding: 4px 10px; font-size: 13px; }

/* Umbau der Abschnitte */
.umbau { margin-left: auto; display: flex; gap: 6px; }
.umbau button { padding: 2px 8px; font-size: 12px; line-height: 1.6; }
.umbau button:disabled { opacity: 0.35; cursor: default; }
.bausteinweg { margin: 2px 0 10px; }
.bausteinneu { margin: 8px 0 0; font-size: 13px; color: var(--grau); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grafikneu { margin: 6px 0 0; font-size: 13px; color: var(--grau); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grafikneu label { display: flex; align-items: center; gap: 6px; margin: 0; }
.grafikneu input[type="file"] { font: inherit; font-size: 12px; max-width: 230px; }
.grafikneu .hinweis-klein { margin: 0; }
.abschnittneu {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 14px;
}
.abschnittneu label { flex: 1; min-width: 180px; margin-bottom: 0; }
.abschnittneu select, .abschnittneu input {
    display: block; width: 100%; margin-top: 4px; padding: 8px;
    border: 1px solid var(--linie); border-radius: 2px; font: inherit;
}
.maske.schmal { max-width: 640px; }
.maske select {
    display: block; width: 100%; margin-top: 4px; padding: 8px;
    border: 1px solid var(--linie); border-radius: 2px; font: inherit; background: #fff;
}
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plakette {
    font-size: 11px; font-weight: 600; color: var(--grau);
    border: 1px solid var(--linie); border-radius: 2px; padding: 1px 7px;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Freigaben */
.hauptweg { margin-right: auto; padding-left: 24px; display: flex; gap: 18px; flex-wrap: nowrap; min-width: 0; }
.hauptweg a { white-space: nowrap; }
.hauptweg a {
    text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 4px 0; border-bottom: 2px solid transparent;
}
.hauptweg a:hover { color: var(--rot-dunkel); border-bottom-color: var(--rot); }

.status { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.status-draft { color: #8a6100; }
.status-in_review { color: var(--blau); }
.status-approved { color: #1a7f37; }
.status-published { color: var(--rot-dunkel); }

/* Produktstammdaten */
.abschnittstitel {
    font-size: 12px; margin: 16px 0 12px; color: var(--grau);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.warnung { border-left: 3px solid var(--rot); background: var(--flaeche-hell); padding: 12px 16px; margin: 4px 0 8px; }
.warnung-titel { font-weight: 700; margin: 0 0 6px; }
.warnung p { margin: 0 0 8px; font-size: 14px; }
.bestaetigung { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; margin: 12px 0 0; font-size: 14px; }
.bestaetigung input { margin: 0; width: 16px; height: 16px; }

.produktbezug { border: 1px solid var(--linie); padding: 12px 14px; margin-bottom: 16px; background: var(--flaeche-hell); }
.produktbezug dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 10px 0; font-size: 14px; }
.produktbezug dt { color: var(--grau); }
.produktbezug dd { margin: 0; }

.vorschau-titel {
    font-size: 12px; margin: 0 0 6px; color: var(--grau);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.vorschau { display: flex; flex-direction: column; }
.vorschau iframe { flex: 1; }

.hinweis-pruefung { border-left-color: var(--blau); }
.hinweis-veraltet { border-left-color: #8a6100; }
.plakette.veraltet { color: #8a6100; border-color: #8a6100; }
.sprachfassungen { list-style: none; margin: 0; padding: 0; }
.sprachfassungen li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.sprachfassungen li a { font-weight: 600; text-transform: uppercase; }

.aktionen form { display: inline; }

.freigabe { border: 1px solid var(--linie); border-left: 3px solid var(--rot); padding: 14px 16px; margin-bottom: 12px; }
.freigabe-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.freigabe .titel { font-weight: 700; text-decoration: none; font-size: 16px; }
.freigabe .titel:hover { text-decoration: underline; }
.freigabe .meta { margin-top: 3px; }
.entscheidung { display: flex; gap: 8px; margin-top: 14px; }
.entscheidung input {
    flex: 1; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 2px; font: inherit;
}
/* Zurueckweisen ist die seltenere Entscheidung und traegt nicht das Rot. */
.entscheidung button[value=rejected] {
    background: #fff; color: var(--text); border-color: var(--linie); font-weight: 400;
}
.entscheidung button[value=rejected]:hover { background: var(--flaeche); border-color: var(--grau); color: var(--text); }

.seiten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 20px 0; font-size: 14px; }
.seite {
    display: inline-block; min-width: 32px; padding: 6px 9px; text-align: center;
    border: 1px solid var(--linie); text-decoration: none; color: var(--text); background: #fff;
}
.seite:hover { background: var(--flaeche); text-decoration: none; }
.seite.aktuell { background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600; }
.seite.gesperrt, .seite.luecke { color: var(--grau); background: var(--flaeche-hell); }
.seite.luecke { border-color: transparent; background: none; min-width: 0; }
.seiten-stand { margin-left: auto; color: var(--grau); }

/* Ein Bildzeichen ohne Groessenangabe zeichnet der Browser in Originalgroesse.
   Einmal hat das die halbe Seite gefuellt - hier kann es das nicht mehr. */
nav svg { width: 1em; height: 1em; }

.fortschritt { height: 10px; background: var(--flaeche); border: 1px solid var(--linie); margin: 10px 0 6px; }
.fortschritt-balken { height: 100%; background: var(--rot); transition: width .4s ease; }
.fortschritt-text { font-weight: 600; margin: 14px 0 0; }



/* Sprachwahl in der Kopfzeile: zwei Kuerzel, das aktive ohne Knopf. */
.sprachwahl { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.sprachwahl .sprache { background: none; border: 0; padding: 2px 4px; font: inherit; font-size: 13px; color: var(--grau); cursor: pointer; }
.sprachwahl .sprache:hover { color: #000; text-decoration: underline; }
.sprachwahl .sprache.aktiv { color: #000; font-weight: 600; cursor: default; }