html {
    font-family: Helvetica, sans-serif;
}

/* Scrollbalken ausblenden, Scrollen bleibt moeglich -> kein Springen des Contents beim Hover-Zoom */
html, body {
    scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    padding: 0;
}

/* Immer 50px Rand rundum (auch oben/unten), border-box damit 100vh nicht ueberlaeuft */
.container {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

/* Grid: max. 6 Cards pro Zeile (6 x 200px + 5 x 50px Gap = 1450px),
   auf kleineren Screens automatisch weniger. Zeilen fuellen von links auf,
   der Block als Ganzes bleibt zentriert. */
.body {
    width: 100%;
    max-width: 1450px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center;
    gap: 50px;
}

.body > * {
    height: 281px;
    color: inherit;
    text-decoration: none;
}

h2 {
    vertical-align: middle;
    flex: 0 0 100%;
}

.cardGrid {
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    transition: 0.5s ease;
    cursor: pointer;
}

.cardImage {
    height: 180px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    margin: 10px;
}

.cardText {
    height: 80px;
    width: 200px;
    display: flex;
    margin: auto;
    text-align: center;
    font-size: 14px;
    border-top: solid 1px #ddd;
}

.cardGrid:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.card1 > .cardImage {
    background: url(images/outlook.svg);
    background-size: cover;
}

.card2 > .cardImage {
    background: url(images/share.svg);
    background-size: cover;
}

.card3 > .cardImage {
    background: url(images/halbleiterRiseTec.svg);
    background-size: cover;
}

.card4 > .cardImage {
    background: url(images/buerobedarf.svg);
    background-size: cover;
}

.card5 > .cardImage {
    background: url(images/intranet.svg);
    background-size: cover;
}

.card6 > .cardImage {
    background: url(images/leichteSprache.png);
    background-size: cover;
}

.card7 > .cardImage {
    background: url(images/businessDrive.svg);
    background-size: cover;
}

.card8 > .cardImage {
    background: url(images/pep.svg);
    background-size: cover;
}

.card9 > .cardImage {
    background: url(images/pepWeb.svg);
    background-size: cover;
}

.card10 > .cardImage {
    background: url(images/lh-logo-ohne-welle-zentriert.png);
    background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
}

.card11 > .cardImage {
    background: url(images/google.svg);
    background-size: cover;
}

.card12 > .cardImage {
    background: url(images/trello240.svg);
    background-size: cover;
}

.card13 > .cardImage {
    background: url(images/icons8-bakterien.svg);
    background-size: cover;
}

.card14 > .cardImage {
    background: url(images/icons8-aufgabe.svg);
    background-size: cover;
}

.card15 > .cardImage {
    background: url(images/icons8-nachrichten.svg);
    background-size: cover;
}


.card16 > .cardImage {
    background: url(images/icons8-archiv.svg);
    background-size: cover;
}

.card17 > .cardImage {
    background: url(images/docuware.png);
    background-size: cover;
}

.card18 > .cardImage {
    background: url(images/digital_illustration.svg);
    background-size: cover;
}

.card19 > .cardImage {
    background: url(images/icons8-geschaeft.svg);
    background-size: cover;
}

.card20 > .cardImage {
    background: url(images/connext_vivendi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: 63CAE1;
}

.card21 > .cardImage {
    background: url(images/icons8-euro-preisschild.svg);
    background-size: cover;
}

.card22 > .cardImage {
    background: url(images/reinigungsbedarf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card23 > .cardImage {
    background: url(images/icons8-iphone.svg);
    background-size: cover;
}

.card24 > .cardImage {
    background: url(images/icons8-einkaufskorb.svg);
    background-size: cover;
}

.card25 > .cardImage {
    background: url(images/transgourmet.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card26 > .cardImage {
    background: url(images/apetito.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card27 > .cardImage {
    background: url(images/detailansicht.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card28 > .cardImage {
    background: url(images/pep2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card29 > .cardImage {
    background: url(images/buch_blau.svg);
    background-size: cover;
}

.card30 > .cardImage {
    background: url(images/icons8-vertikale-zeitleiste.svg);
    background-size: cover;
}

.card31 > .cardImage {
    background: url(images/sofia_neu.png);
	background-size: cover;
}

.card32 > .cardImage {
    background: url(images/office.png);
    background-size: cover;
}

.card33 > .cardImage {
    background: url(images/teams.png);
    background-size: cover;
}

.card34 > .cardImage {
    background: url(images/quotenrechner_icon_final.png);
    background-size: cover;
}

.card35 > .cardImage {
    background: url(images/pdf_tool.png);
    background-size: cover;
}

.card36 > .cardImage {
    background: url(images/fotoparadies.png);
    background-size: cover;
}

.cardRDP > .cardImage {
    background: url(images/rdp.png);
    background-size: cover;
}

/* Suchfeld: fest oben im Container, mittig; das Grid zentriert sich darunter */
.search {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 50px;
}

.search input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 44px 12px 20px;
    border: 0;
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: 0.5s ease;
}

/* Fokus wie der Card-Hover: Schatten wird weicher, dazu ein duenner Ring in der Vivendi-Farbe */
.search input:focus {
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1), 0 0 0 2px #63cae1;
}

/* X zum Leeren, nur sichtbar wenn etwas eingegeben ist */
.search button {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: none;
    color: #999;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.search button:hover {
    background: #eee;
    color: #333;
}

/* Versteckte Cards: Unterseiten-Treffer ohne Eingabe, nicht passende Cards bei Eingabe */
.body > [hidden] {
    display: none;
}