/* ==========================================================================
   KKSD EDC Systeme – Stylesheet der Startseite
   Version 2.3 – freigegeben am 02.09.2026 (KKSD)

   Ersetzt nicepage.css (1,5 MB) und index.css. Alle Werte (Farben, Maße,
   Umbruchpunkte) sind aus der bisherigen Nicepage-Ausgabe übernommen, damit
   das Erscheinungsbild unverändert bleibt.

   Aufbau:
     1. Grundlagen (Reset, Schrift, Farben)
     2. Sheet (zentrierte Inhaltsbreite, Umbruchpunkte)
     3. Kopfbereich
     4. Hauptbereich mit Systemkacheln
     5. Fußbereich
     6. Umbruchpunkte (responsive Anpassungen)

   Umbruchpunkte (wie bisher):
     >= 1200 px  Desktop, Inhaltsbreite 1140 px, 3 Spalten
     992–1199 px Inhaltsbreite 940 px, 3 Spalten
     768–991 px  Inhaltsbreite 720 px, 2 Spalten
     576–767 px  Inhaltsbreite 540 px, 2 Spalten (schmale Kacheln)
     <= 575 px   Inhaltsbreite 340 px, 1 Spalte
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;   /* Fließtext, siehe fonts.css */
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff;
    background-color: #666666;              /* sichtbar nur unterhalb des Fußbereichs */
}

img {
    border-style: none;
}

/* Sichtbarer Tastaturfokus (Barrierefreiheit); ohne Auswirkung auf Mausnutzung */
a:focus-visible {
    outline: 3px solid #16b6a1;
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. Sheet – zentrierter Inhaltsbereich mit fester Breite
   -------------------------------------------------------------------------- */

.sheet {
    display: flow-root;                      /* verhindert das Zusammenfallen von Außenabständen (margin collapsing) */
    position: relative;
    width: 1140px;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   3. Kopfbereich
   -------------------------------------------------------------------------- */

.site-header {
    display: flow-root;
    color: #111111;
    background-color: #e5e5e5;
}

.site-header__sheet {
    min-height: 105px;
}

/* Logo oben links; Maße 92 x 64 px wie bisher */
.site-logo {
    display: table;
    margin: 20px auto 0 0;
    text-decoration: none;
}

.site-logo img {
    display: block;
    width: 92px;
    height: 64px;
}


/* --------------------------------------------------------------------------
   4. Hauptbereich – Hintergrundbild und Kachelraster
   -------------------------------------------------------------------------- */

.systems {
    display: flow-root;
    position: relative;
    color: #111111;
    /* Foto über einem dunkelgrauen Verlauf (Fallback, falls das Bild nicht lädt) */
    background-image:
        url('images/hintergrund-berglandschaft.jpg'),
        linear-gradient(to bottom, rgba(41, 45, 51, 1), rgba(41, 45, 51, 1));
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}

.systems__sheet {
    min-height: 665px;
}

/* Raster der Kacheln: 3 Spalten, 10 px Abstand */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, calc(33.3333% - 6.66667px));
    grid-auto-columns: calc(33.3333% - 6.66667px);
    grid-auto-rows: 1fr;                    /* alle Zeilen gleich hoch */
    gap: 10px;
    min-height: 545px;
    margin: 60px 0;
    padding: 0;
    list-style: none;
}

.card-grid__item {
    display: flex;
    position: relative;
    text-align: left;
}

/* Die gesamte Kachel (Icon + Textbox) ist ein Link */
.card {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 100%;
    padding: 30px 0 30px 30px;
    color: inherit;
    text-decoration: none;
}

.card > * {
    flex-shrink: 0;
}

/* Rundes Icon oben links, überlappt die Textbox */
.card__icon {
    display: block;
    position: relative;
    z-index: 1;
    width: 65px;
    height: 65px;
    margin: 5px auto 0 0;
    padding: 20px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

.card__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon-Farben (bisher u-custom-color-2 / -1 / -3) */
.card__icon--dark { background-color: #293133; }   /* TrialMaster */
.card__icon--red  { background-color: #d1232b; }   /* REDCap KKSD */
.card__icon--blue { background-color: #25568e; }   /* REDCap Forschungs-IT */

/* Halbtransparente, abgerundete Textbox; nach oben unter das Icon gezogen */
.card__box {
    display: flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1;                            /* füllt die Kachelhöhe, dadurch alle Textboxen einer Zeile gleich hoch */
    width: 275px;
    min-height: 179px;
    margin: -65px auto 0 68px;
    padding: 0 30px 10px;
    border-radius: 20px;
}

/* Hintergrund der Textbox als eigene Ebene mit 35 % Deckkraft,
   damit der Text selbst voll deckend bleibt */
.card__box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background-color: #f5f7fa;
    opacity: 0.35;
}

.card__title {
    display: block;
    position: relative;
    margin: 10px 0 0;
    font-family: Roboto, sans-serif;        /* Überschriften, siehe fonts.css */
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.card__text {
    display: block;
    position: relative;
    margin: 19px 0 0;
    font-size: 1rem;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   5. Fußbereich
   -------------------------------------------------------------------------- */

.site-footer {
    display: flow-root;
    color: #ffffff;
    background-color: #333333;
    text-align: center;
}

.site-footer__sheet {
    min-height: 120px;
}

.site-footer__text {
    display: table;                          /* schrumpft auf Inhaltsbreite, dadurch zentrierbar */
    margin: 49px auto 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.site-footer__text a {
    color: #ffffff;
    text-decoration: none;
}

/* Zeile mit Impressum / Datenschutz unter der Copyright-Zeile */
.site-footer__links {
    margin: 4px auto 49px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.site-footer__links a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer__links a:hover {
    text-decoration: underline;
}

.site-footer__sep {
    margin: 0 0.5em;
}


/* --------------------------------------------------------------------------
   5a. Inhaltsseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */

.content {
    display: flow-root;
    color: #111111;
    background-color: #f5f7fa;               /* Farbton der Kachel-Textboxen */
}

.content__sheet {
    min-height: 400px;
}

/* Textspalte: begrenzte Zeilenlänge für gute Lesbarkeit */
.content__body {
    max-width: 740px;
    margin: 40px auto 60px;
}

.content__body h1 {
    margin: 0 0 20px;
    font-family: Roboto, sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    overflow-wrap: anywhere;                 /* lange Wörter (z. B. „Datenschutzinformationen") dürfen umbrechen */
    hyphens: auto;
}

.content__body h2 {
    margin: 32px 0 12px;
    font-family: Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.content__body h3 {
    margin: 24px 0 8px;
    font-family: Roboto, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.content__body h4 {
    margin: 16px 0 6px;
    font-size: 1rem;
    font-weight: 700;
}

.content__body p {
    margin: 0 0 16px;
}

.content__body ul {
    margin: 0 0 16px;
    padding-left: 24px;
}

.content__body li {
    margin-bottom: 6px;
}

/* Versions-/Standangabe unter dem Dokumenttitel */
.content__body .doc-meta {
    margin-bottom: 28px;
    font-size: 0.875rem;
    color: #444444;
}

/* Lange Links (URLs, E-Mail-Adressen) dürfen auf schmalen Bildschirmen umbrechen */
.content__body a {
    overflow-wrap: anywhere;
}

.content__body a {
    color: #0e7f70;                          /* dunklere Stufe der Themefarbe #16b6a1, ausreichender Kontrast auf hellem Grund */
    text-decoration: underline;
}

.content__body a:hover {
    color: #0b6659;
}


/* --------------------------------------------------------------------------
   6. Umbruchpunkte
   -------------------------------------------------------------------------- */

/* --- bis 1199 px: Inhaltsbreite 940 px ------------------------------------ */
@media (max-width: 1199px) {
    .sheet {
        width: 940px;
    }

    /* Bisher wurde der Kopfbereich unterhalb von 1200 px vertikal zentriert;
       das Logo lag dadurch 20 px tiefer als auf dem Desktop. Übernommen. */
    .site-logo {
        margin-top: 40px;
    }

    .systems__sheet {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 459px;
    }

    .card-grid {
        min-height: 428px;
    }

    .card__box {
        padding-top: 0;
        padding-bottom: 30px;
    }

    .site-footer__sheet {
        min-height: 99px;
    }
}

/* --- bis 991 px: Inhaltsbreite 720 px, 2 Spalten -------------------------- */
@media (max-width: 991px) {
    .sheet {
        width: 720px;
    }

    .card-grid {
        grid-template-columns: repeat(2, calc(50% - 5px));
        grid-auto-columns: calc(50% - 5px);
    }

    .site-footer__sheet {
        min-height: 76px;
    }
}

/* --- bis 767 px: Inhaltsbreite 540 px, schmale Textboxen ------------------ */
@media (max-width: 767px) {
    .sheet {
        width: 540px;
    }

    .card {
        padding-left: 10px;
    }

    .card__box {
        width: 187px;
        min-height: 199px;
        margin-top: -60px;
        margin-right: 0;
        margin-left: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-footer__sheet {
        min-height: 57px;
    }
}

/* --- bis 575 px: Inhaltsbreite 340 px, 1 Spalte --------------------------- */
@media (max-width: 575px) {
    .sheet {
        width: 340px;
    }

    .systems__sheet {
        min-height: 1376px;
    }

    .card-grid {
        grid-template-columns: repeat(1, 100%);
        grid-auto-columns: 100%;
    }

    .card {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .card__box {
        width: 250px;
        min-height: 161px;
    }

    .site-footer__sheet {
        min-height: 36px;
    }

    /* Inhaltsseiten: kleinere Überschriften auf schmalen Bildschirmen */
    .content__body h1 {
        font-size: 1.5rem;
    }

    .content__body h2 {
        font-size: 1.25rem;
    }
}