/*
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*/
/*
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #030303;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
*/

    /* eingefügt */
    .h2_c { font-size: 1.75em; color: #4A6DA7; text-align: center; }

    .arrow:link    { text-decoration:none; letter-spacing: 0.02em; }
    .arrow:visited { background-color:#9C9C9C; opacity: 1.0; }
    .arrow:focus   { background-color:#9C9C9C; opacity: 1.0; }
    .arrow:hover   { background-color:#9C9C9C; opacity: 1.0 ;
                    color:#FFFFFF; text-decoration:none; }
    .arrow:active  { background-color:#9C9C9C;
                    color:#4A6DA7; }

    .arrow {
        position: relative;
        font-size: 1em;
        color:#4A6DA7;
        padding: 10px; }

    #arrow {
        font-size: 0.325em; }

    #spm_a  { float: right; }
    #kap_z  { float: left; }
    #kap_v  { float: right; }


    /* Ursprungsinsinhalt */
    .slider-wrapper {
        overflow: hidden;
        max-width: 1400px;
        margin: 0 65px 48px;                            /* Abstand 1. Bild links, Abstand bullets */
        }

    .card-item {                                        /* Inhalte der Karten */
        display: flex;
        justify-content: center;                        /* zentriert */
        align-items: center;                            /* zentriert */
        flex-direction: column;                         /* alle Inhalte untereinander anzeigen */
        color: #808080;                                 /* Schriftfarbe */
        padding: 24px;                                  /* Abstände oben/unten 36 */
        border-radius: 20px;                            /* Radien */
        background-color: rgba(155, 155, 155, 0.2);     /* intertgrundfarbe inkl. Transparenz 0.2 */
        border: 1px solid rgba(155, 155, 155, 0.5);     /* Rahmendicke inkl. Transparenz */
        backdrop-filter: blur(30px);                    /* Milchglaseffekt bei Hintergrundbild */
        user-select: none;                              /* Markierbarkeit (Maus) deaktiviert */
        min-width: 280px;
        min-height: 320px;
        }

    .card-item .user-image {                    /* Bilder */
        width: 240px;                           /* Bildbreite */
        height: 180px;                          /* Bildhöhe - ggf. anpassen */
        border-radius: 5%;
        margin-bottom: 16px;                    /* Abstand Bild / Schrift nachfolgend */
        border: 3px solid #808080;
        padding: 12px;
        }

    .card-item .user-name {                     /* Bildbeschreibung eins */
        color: #808080;
        }

    .card-item .user-info {                     /* Bildbeschreibung zwei */
        color: #7EBC00;
        font-size: 1.15rem;
/*        margin: 14px 0 40px;                    /* Abstände außen */
        }

    .card-item .user-button {                   /* Auswahl-Button */
        padding: 10px 35px;                     /* Abstände innen */
        color: #fff;
        font-size: 1.25rem;
        background-color: #808080;
        background-color: #7EBC00; opacity: 0.8;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        transition: 0.2s ease;                      /* Verzögerung */
        }

    .card-item .user-button:hover {
        background-color: rgba(255, 255, 255, 0.1);     /* inkl. ... */
        border: 1px solid #808080;
        color: #808080;
        }

    .slider-wrapper .swiper-pagination-bullet {         /* Punkte unter Bilder */
        background-color: #808080;
        height: 12px;                                   /* Größe der Punkte */
        width: 12px;                                    /* Größe der Punkte */
        opacity: 0.5;
        }

    .slider-wrapper .swiper-pagination-bullet-active {
        opacity: 1;
        }

    .slider-wrapper .swiper-slider-button {
        color:#808080;
        color: #7EBC00;
        margin-top: -35px;                              /* Position der Pfeile */
        transition: 0.2 ease;                           /* Verzögerung */
        }

    .slider-wrapper .swiper-slider-button:hover {
        color: #7EBC00;
        color:#808080;
        }

@media (max-width: 768px) {
    .slider-wrapper { margin: 0 10px 40px; }
    .slider-wrapper .swiper-slider-button { display: none; }
        }

@media only screen and ( min-width: 490px ) and ( max-width: 766px ) {
    .card-item {
        padding: 16px; } 
    .card-item .user-image {
        width: 360px;
        height: 270px; }
        }