/* ===========================================================
   CO2-Bilanz Statuspage – GreenWebspace

   Farbwerte aus greenwebspace.com ausgelesen (Stand 23.09.2026).
   Gruen, Mint und Teal sind dort und im Vorlagen-SVG identisch.
   =========================================================== */

:root {
    --gws-green:      #005e2e;   /* Dunkelgruen: Headlines, Pills, Links */
    --gws-mint:       #aee4e9;   /* Hintergrund Inhaltsbereich */
    --gws-teal:       #008287;   /* Hintergrund Footer */
    --gws-teal-dark:  #015256;   /* Teal-Abstufung der Website */
    --gws-olive:      #b9b20b;   /* Akzent / Buttons der Website, Logofarbe */
    --gws-olive-dark: #ada711;   /* Oliv als Textfarbe */
    --gws-sand:       #f2f4ec;   /* heller Flaechenton der Website */
    --gws-alert:      #ff4519;   /* NEIN / NICHT AKTIV (aus dem Vorlagen-SVG) */
    --gws-text:       #373737;   /* Fliesstext der Website, kein reines Schwarz */

    --gws-wrapper-max: 1140px;
    --gws-pad: 2rem;
}

body {
    color: var(--gws-text);
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* TODO: echte CI-Schrift ergaenzen – im SVG sind alle Texte in Pfade konvertiert */
}

.gws-wrapper {
    max-width: var(--gws-wrapper-max);
    margin-inline: auto;
}

/* ---------- Reihe A : Header ---------- */
.gws-row--header {
    background: #fff;
    padding: 1.5rem var(--gws-pad);
}

.gws-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Originallogo von greenwebspace.com (GWS_Logo.png, 390x125, oliv, transparent) */
.gws-logo {
    flex: 0 0 auto;
    width: 150px;
    height: auto;
}

.gws-brand__divider {
    width: 1px;
    align-self: stretch;
    min-height: 2.75rem;
    background: var(--gws-text);
}

.gws-brand__title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.gws-brand__kicker  { font-size: 1.125rem; letter-spacing: .02em; }
.gws-brand__product { font-size: 1.25rem; font-weight: 700; }

/* Sprachauswahl DE | EN */
.gws-lang {
    min-height: 1.5rem;
    font-size: .9rem;
    letter-spacing: .04em;
}

.gws-lang a {
    color: var(--gws-text);
    text-decoration: none;
}

.gws-lang a:hover { text-decoration: underline; }

.gws-lang a[aria-current] {
    color: var(--gws-green);
    font-weight: 700;
}

/* ---------- Reihe B : Inhalt ---------- */
.gws-row--content {
    background: var(--gws-mint);
    padding: 2.5rem var(--gws-pad) 3rem;
}

.gws-claim {
    color: var(--gws-green);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* Label links, Statuspille rechts */
.gws-statusrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.gws-statusrow__label {
    flex: 0 0 11rem;
    font-size: .9rem;
    line-height: 1.25;
}

.gws-pill {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 16rem;
    overflow-wrap: anywhere;
    border-radius: 999px;
    padding: .4rem 1rem;
    text-align: center;
    font-size: .9rem;
    border: 1px solid var(--gws-green);
}

.gws-pill--value   { background: #fff; color: var(--gws-text); }
.gws-pill--solid   { background: var(--gws-green); color: #fff; }
.gws-pill--outline { background: transparent; color: var(--gws-green); }

/* Negativzustaende (A1.2 / A3) */
.gws-pill--alert-solid   { background: var(--gws-alert); border-color: var(--gws-alert); color: #fff; }
.gws-pill--alert-outline { background: transparent; border-color: var(--gws-alert); color: var(--gws-alert); }

.gws-rule {
    width: 5rem;
    margin: 2rem 0 1.5rem;
    border: 0;
    border-top: 1px solid var(--gws-text);
    opacity: 1;
}

.gws-facts li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.gws-facts i {
    flex: 0 0 auto;
    line-height: 1.5;
}

.gws-link {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--gws-green);
    font-weight: 700;
    text-decoration: none;
}

.gws-link:hover { text-decoration: underline; }

.gws-heading {
    color: var(--gws-green);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.gws-row--content p {
    font-size: .95rem;
    line-height: 1.55;
}

/* Abstand zwischen den Bloecken der rechten Spalte */
.gws-col-info > .gws-block + .gws-block {
    margin-top: 1.25rem;
}

/* ---------- mobil ---------- */
@media (max-width: 767.98px) {

    :root { --gws-pad: 1.25rem; }

    /* gestapelte Spalten in Reihe B trennen */
    .gws-col-info { margin-top: 2.5rem; }

    /* Header: Logo und Titel duerfen umbrechen, Titel etwas kleiner */
    .gws-brand { gap: .85rem; flex-wrap: wrap; }
    .gws-brand__divider { display: none; }   /* haengt nach dem Umbruch frei */
    .gws-logo  { width: 120px; }
    .gws-brand__kicker  { font-size: .95rem; }
    .gws-brand__product { font-size: 1.05rem; }

    /* Statuszeilen bleiben zweispaltig, Label darf schmaler werden */
    .gws-statusrow__label { flex: 0 1 45%; }
}

/* ---------- Reihe C : Footer ---------- */
.gws-row--footer {
    background: var(--gws-teal);
    color: #fff;
    padding: 1.25rem var(--gws-pad);
}

.gws-disclaimer {
    font-size: .75rem;
    line-height: 1.5;
}

.gws-legal {
    font-size: .75rem;
    letter-spacing: .04em;
}

.gws-legal a {
    color: #fff;
    text-decoration: none;
}

.gws-legal a:hover { text-decoration: underline; }