From a815fe7c7bc5337fab77c853b68b2dd28f3950e2 Mon Sep 17 00:00:00 2001
From: M_Viper <admin@m-viper.de>
Date: Wed, 26 Nov 2025 16:37:18 +0000
Subject: [PATCH] Dateien nach "assets/css" hochladen

---
 assets/css/teamcard-admin.css    | 102 ++++++++++++++
 assets/css/teamcard-frontend.css | 233 +++++++++++++++++++++++++++++++
 2 files changed, 335 insertions(+)
 create mode 100644 assets/css/teamcard-admin.css
 create mode 100644 assets/css/teamcard-frontend.css

diff --git a/assets/css/teamcard-admin.css b/assets/css/teamcard-admin.css
new file mode 100644
index 0000000..7bc5610
--- /dev/null
+++ b/assets/css/teamcard-admin.css
@@ -0,0 +1,102 @@
+/* Allgemeine Admin-Stile */
+.teamcard-admin .nav-tab-wrapper {
+    margin-bottom: 20px;
+}
+
+.teamcard-admin .tab-content {
+    background: #fff;
+    padding: 20px;
+    border: 1px solid #ccd0d4;
+    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+}
+
+.teamcard-add-new-form {
+    background: #f9f9f9;
+    border: 1px solid #e5e5e5;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.form-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.form-field label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.form-field input[type="text"],
+.form-field select {
+    width: 100%;
+    padding: 8px;
+}
+
+.teamcard-table .column-thumbnail {
+    width: 120px;
+}
+
+.teamcard-table td {
+    vertical-align: middle;
+}
+
+.image-preview-container {
+    margin-bottom: 10px;
+    min-height: 50px;
+}
+
+.teamcard-bild-vorschau {
+    max-width: 80px;
+    max-height: 80px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+}
+
+.editable {
+    padding: 8px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: all 0.2s ease-in-out;
+    min-height: 18px; /* Verhindert Sprünge */
+}
+
+.editable:hover {
+    border-color: #0073aa;
+    background-color: #f3f3f3;
+    cursor: pointer;
+}
+
+.inline-edit {
+    width: 100%;
+    padding: 6px;
+    box-sizing: border-box;
+}
+
+.ui-sortable-helper {
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.ui-state-highlight {
+    height: 80px;
+    background-color: #f0f0f0;
+    border: 1px dashed #ccc;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    color: #999;
+}
+.ui-state-highlight::before {
+    content: "Hier ablegen";
+}
+
+#teamcard-message {
+    position: fixed;
+    top: 50px;
+    right: 20px;
+    z-index: 9999;
+    max-width: 300px;
+}
\ No newline at end of file
diff --git a/assets/css/teamcard-frontend.css b/assets/css/teamcard-frontend.css
new file mode 100644
index 0000000..03f57ef
--- /dev/null
+++ b/assets/css/teamcard-frontend.css
@@ -0,0 +1,233 @@
+/* Grid-Container für die Teamkarten */
+.teamcard-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: flex-start;
+    margin: 30px 0;
+}
+
+/* Basis-Stile für alle Teamkarten */
+.teamcard {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    overflow: hidden; /* Verhindert, dass abgerundete Ecken vom Bild abgeschnitten werden */
+}
+
+.teamcard:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.teamcard-image {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.teamcard-image img {
+    max-width: 120px;
+    height: 120px;
+    object-fit: cover; /* Schneidet Bilder zu, ohne sie zu verzerren */
+    border-radius: 50%;
+    border: 3px solid #f0f0f0;
+}
+
+.teamcard-content {
+    text-align: center;
+}
+
+.teamcard-name {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 0 0 10px 0;
+    color: #333;
+}
+
+.teamcard-function {
+    font-size: 1em;
+    font-weight: 500;
+    color: #0073aa;
+    margin: 0 0 5px 0;
+}
+
+.teamcard-responsibility {
+    font-size: 0.9em;
+    color: #666;
+    margin: 0;
+}
+
+/* Spezifische Stile für die Card-Typen */
+
+/* Standard Card */
+.teamcard-standard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Compact Card */
+.teamcard-compact {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+}
+.teamcard-compact .teamcard-image {
+    margin-bottom: 0;
+    margin-right: 15px;
+    flex-shrink: 0;
+}
+.teamcard-compact .teamcard-image img {
+    width: 60px;
+    height: 60px;
+}
+.teamcard-compact .teamcard-content {
+    flex-grow: 1;
+}
+
+/* Featured Card */
+.teamcard-featured {
+    border: 2px solid #0073aa;
+    background: linear-gradient(145deg, #ffffff, #f9fbff);
+}
+.teamcard-featured .teamcard-image img {
+    border-color: #0073aa;
+}
+.teamcard-featured .teamcard-name {
+    color: #0073aa;
+}
+
+/* --- NEUE STILE FÜR DIE KARTENTYPEN --- */
+
+/* Flip Card */
+.teamcard-flip-container {
+    perspective: 1000px; /* Entfernung zum 3D-Effekt */
+}
+
+.teamcard-flipper {
+    position: relative;
+    width: 100%;
+    height: 320px; /* Feste Höhe, wichtig für den Flip-Effekt */
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+}
+
+.teamcard-flip-container:hover .teamcard-flipper {
+    transform: rotateY(180deg);
+}
+
+.teamcard-flip {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden; /* Rückseite der Elemente verbergen */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    border: 1px solid #eee;
+}
+
+.teamcard-front {
+    background-color: #fff;
+}
+
+.teamcard-back {
+    background-color: #f8f9fa;
+    color: #333;
+    transform: rotateY(180deg);
+}
+
+.teamcard-back .teamcard-content {
+    padding: 20px;
+}
+
+.teamcard-back .teamcard-responsibility {
+    font-size: 0.9em;
+    line-height: 1.6;
+    text-align: left;
+}
+
+/* Profile Card */
+.teamcard-profile {
+    border-radius: 0;
+    overflow: hidden;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+.teamcard-profile-header {
+    height: 180px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+}
+
+.teamcard-profile-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
+}
+
+.teamcard-profile-content {
+    position: relative;
+    z-index: 2;
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.teamcard-profile .teamcard-name {
+    margin: 0;
+    color: #fff;
+    font-size: 1.4em;
+}
+
+.teamcard-profile .teamcard-function {
+    margin: 5px 0 0 0;
+    color: #f0f0f0;
+    font-weight: 400;
+}
+
+.teamcard-profile-body {
+    padding: 20px;
+    background-color: #fff;
+    color: #333;
+    flex-grow: 1;
+}
+
+.teamcard-profile-body .teamcard-responsibility {
+    margin: 0;
+    font-size: 0.9em;
+    line-height: 1.6;
+}
+
+/* Responsive Anpassungen */
+@media (max-width: 768px) {
+    .teamcard-grid {
+        justify-content: center;
+    }
+    .teamcard {
+        flex-basis: 100% !important;
+        max-width: 320px;
+    }
+    /* Anpassung der Höhe für Flip-Cards auf kleinen Bildschirmen */
+    .teamcard-flipper {
+        height: 280px;
+    }
+}
\ No newline at end of file