body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: flex-start; /* Sicherstellen, dass die Elemente am oberen Rand ausgerichtet sind */
    width:100%;
    margin: 0 auto; /* Zentriert den Container horizontal */
}

.container2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    align-items: center; /* Sicherstellen, dass die Elemente am oberen Rand ausgerichtet sind */
    width:100%;
    margin: 0 auto; /* Zentriert den Container horizontal */
}

.container3 {
    display: grid;
    grid-template-columns: 40% 60%;; /* Zwei Spalten mit gleicher Breite */
    grid-gap: 0px; /* Abstand zwischen den Spalten */
    width: 100%; /* Nimmt die volle Breite ein */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0px; /* Abstand innerhalb des Containers */
    box-sizing: border-box;
    align-items: flex-start; /* Richtet die Blöcke am oberen Rand aus */
}

.section2 {
    background-image: url('players/Feld.jpg'); /* Pfad zum Hintergrundbild */
    background-size: cover; /* Deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert die Wiederholung des Bildes */
}

/* Linke Seite */
.left-side {
    width: 100%; /* Weit genug, um alle Felder aufzunehmen */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalte oben ausrichten */
    align-items: center; /* Inhalte horizontal zentrieren (optional) */
    z-index: 1; /* Bleibt unter .right-side */
    position: relative;
}

/* Linke Seite */
.left-side1 {
    width: 100%; /* Weit genug, um alle Felder aufzunehmen */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalte oben ausrichten */
    align-items: center; /* Inhalte horizontal zentrieren (optional) */
    z-index: 1; /* Bleibt unter .right-side */
    position: relative;
}

/* Rechte Seite */
.right-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalte oben ausrichten */
    align-items: center; /* Inhalte horizontal zentrieren (optional) */
    left: -0%;
    z-index: 2; /* Liegt über .left-side */
    position: relative;
}

/* Rechte Seite */
.right-side1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalte oben ausrichten */
    align-items: center; /* Inhalte horizontal zentrieren (optional) */
    left: -0%;
    z-index: 2; /* Liegt über .left-side */
    position: relative;
}

.right-side .section {
    background-image: url('players/Feld.jpg'); /* Pfad zum Hintergrundbild */
    background-size: cover; /* Deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert die Wiederholung des Bildes */
}

.right-side1 .section {
    background-image: url('players/Feld.jpg'); /* Pfad zum Hintergrundbild */
    background-size: cover; /* Deckt den gesamten Bereich ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert die Wiederholung des Bildes */
}

/* Abschnitts-Container */
.section {
    justify-content: center; /* Zentriert die Felder in der Zeile */
    margin-bottom: 0px;
}

/* Feld-Reihe für 3 Elemente*/
.field-row1 {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Drei Spalten, jede 100px breit */
    grid-gap: 0px; /* Abstand zwischen den Feldern */
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    left: 10px; /* Verschiebt den Container 10px nach rechts */
}

.field-row11 {
    display: grid;
    grid-template-columns: repeat(3, 200px); /* Drei Spalten, jede 200px breit */
    grid-gap: 0px; /* Abstand zwischen den Feldern */
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    left: 10px; /* Verschiebt den Container 10px nach rechts */
}

/* Feld-Reihe für 4 Elemente*/
.field-row2 {
    display: grid;
    grid-template-columns: repeat(4, 100px); /* Drei Spalten, jede 100px breit */
    grid-gap: 0px; /* Abstand zwischen den Feldern */
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    left: 10px; /* Verschiebt den Container 10px nach rechts */
}

.field-row22 {
    display: grid;
    grid-template-columns: repeat(4, 200px); /* Drei Spalten, jede 200px breit */
    grid-gap: 0px; /* Abstand zwischen den Feldern */
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    left: 10px; /* Verschiebt den Container 10px nach rechts */
}

/* Feld-Reihe für 1 Element*/
.field-row3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.field-row31 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.field-row1:not(:last-child) {
            margin-bottom: 80px; /* Abstand zwischen den Reihen */
        }

.field-row2:not(:last-child) {
            margin-bottom: 80px; /* Abstand zwischen den Reihen */
        }

.field-row3:not(:last-child) {
            margin-bottom: 80px; /* Abstand zwischen den Reihen */
        }

.field-row31:not(:last-child) {
            margin-bottom: 0px; /* Abstand zwischen den Reihen */
        }

/* Felder */
/*.field {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    border: 1px solid #000;*/
/*    margin: 5px;*/
/*    position: relative;*/
/*}*/

.header {
    width: 100%; /* Stellt sicher, dass die Header-Box die gesamte Breite einnimmt */
    font-weight: bold; /* Macht die Überschrift fett */
    text-align: center;
    margin-bottom: 10px;
}

/*.draggable {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: contain;*/
/*    cursor: move;*/
/*}*/

.spacer {
    height: 20px;
}

.dropzone {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.instructions {
   width:100%;
   height:100%;
   background:rgba(255,255,225,0.05);
    text-align: center;
   margin:20px auto;
    padding: 20px 20px 10px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.instructions2 {
   width:100%;
   height:100%;
   background:rgba(192,192,192,0.3);
    text-align: center;
   margin: 0 auto; /* Zentriert den Container horizontal */
    padding: 20px 20px 20px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.instructions3 {
   width:100%;
   height:100%;
   background:rgba(0, 75, 8, 0.1);
    text-align: center;
   margin:20px auto;
    padding: 20px 20px 10px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.instructions4 {
   width:100%;
   height:100%;
   background:rgba(192,192,192,0.3);
    text-align: center;
   margin:20px auto;
    padding: 20px 20px 20px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.instructions5 {
   width:100%;
   height:100%;
   background:rgba(255,255,225,0.05);
    text-align: left;
   margin:20px auto;
    padding: 20px 20px 10px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.instructions6 {
   width:100%;
   height:100%;
   background:rgba(0, 75, 8, 0.1);
    text-align: left;
   margin:20px auto;
    padding: 20px 20px 10px 20px;

    position:relative;
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
       -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;
            box-shadow:0 1px 5px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.05) inset;

    -moz-border-radius: 8px/8px;
         border-radius: 8px/8px;
}

.field {
            width: 73px;
            height: 93px;
            border: 1px solid #000;
            display: inline-block;
            margin: 5px;
            position: relative;
            background-color: #f0f0f0;
        }

.field2 {
            width: 143px;
            height: 183px;
            display: inline-block;
            margin: 5px;
            position: relative;
            overflow: hidden;
        }

.field3 {
            width: 143px;
            height: 183px;
            border: 1px solid #000;
            display: inline-block;
            margin: 5px;
            position: relative;
            background-color: #f0f0f0;
        }

.draggable {
            width: 70px; /* Einheitliche Breite */
            height: 90px; /* Einheitliche Höhe */
            cursor: move;
            position: absolute;
            object-fit: contain; /* Verhindert Verzerrung */
        }

.draggable2 {
            width: 140px; /* Einheitliche Breite */
            height: 180px; /* Einheitliche Höhe */
            cursor: move;
            position: absolute;
            object-fit: contain; /* Verhindert Verzerrung */
        }

@media (orientation: portrait) {
    .container2 {
        flex-direction: column; /* Elemente untereinander */
        align-items: center; /* Zentrieren */
    }

    .left-side, .right-side {
        width: 100%; /* Volle Breite nutzen */
    }

    /* Linke Seite */
    .left-side1 {
        width: 100%; /* Weit genug, um alle Felder aufzunehmen */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Inhalte oben ausrichten */
        align-items: center; /* Inhalte horizontal zentrieren (optional) */
        z-index: 1; /* Bleibt unter .right-side */
        position: relative;
    }

    /* Rechte Seite */
    .right-side1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Inhalte oben ausrichten */
        align-items: center; /* Inhalte horizontal zentrieren (optional) */
        left: -40%;
        z-index: 2; /* Liegt über .left-side */
        position: relative;
    }

    .field-row1, .field-row11, .field-row2, .field-row22 {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten im Hochformat */
    }

    .instructions, .instructions2, .instructions3 {
        width: 90%; /* Breite im Hochformat */
        font-size: 16px;
    }

    .field, .field2, .field3 {
        width: 103px; /* Kleinere Felder */
        height: 133px;
    }

    .draggable, .draggable2 {
        width: 100px;
        height: 130px;
    }
}
/* Unterstützung für Touchscreens */
@media (hover: none) and (pointer: coarse) {
    .draggable, .draggable2 {
        touch-action: none; /* Verhindert Standard-Touch-Verhalten */
        user-select: none; /* Verhindert die Auswahl von Text */
        position: absolute; /* Für präzises Dragging erforderlich */
    }
}

/* Abschnitt im Vordergrund */
.section.active {
    z-index: 10;
    transform: scale(1.1); /* Vergrößert den Abschnitt, um hervorzuheben */
}

/* Hintergrundabschnitte */
.section:not(.active) {
    z-index: 1;
}

/* Container: optional (zentriert & fixe Breite wie A4) */
  .ds-wrapper{
    max-width: 820px;   /* ~ A4 Breite auf 96dpi */
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
  }

  /* Überschrift wie im Formular */
  .ds-title{
    text-align: center;
    font-size: 20px;
    margin: 18px 0 10px;
    font-weight: bold;
  }

  /* Tabellen-Stil exakt „Formular“ */
  .ds-table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;            /* kompakt */
    line-height: 1.25;          /* enger Zeilenabstand */
  }
  .ds-table td{
    border: 1px solid #000;
    vertical-align: top;
    padding: 8px 10px;
  }
  .ds-table td:first-child{
    width: 34%;
    font-weight: bold;
    white-space: nowrap;
  }
  .ds-note{
    margin-top: 10px;
    font-size: 13px;
  }
  /* Optional: alles sehr kompakt machen? -> font-size: 13px; padding: 6px 8px; */