*/ .data-section { margin-top: 0px; padding: 40px 0 40px 0; color: #ffffff; background-color: #88A2E3; position: relative; flex: 1 0 auto; /* für z-index-Korrektheit */ z-index: 1; } .data-section .table-wrapper { max-width: 100%; overflow-x: auto; /* an Rest-Design anpassen */ background: #1C294B; /* wie welcome-box / profil-blocks */ border: none; border-radius: 12px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.45); padding: 10px 10px 4px; margin: 20px auto; } .data-section a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; letter-spacing: .5px; opacity: .9; } .data-section a:hover { opacity: 1; } .section-container { max-width: none; margin: 0 auto; padding-left: 40px; padding-right: 40px; } /* index.html */ .welcome-box { background-color: #1C294B; color: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.602); max-width: 900px; margin: 20px auto; text-align: center; } .welcome-box h2 { font-family: 'Khand', sans-serif; font-size: 32px; margin-bottom: 16px; } .info-list { text-align: left; margin: 30px auto; max-width: 800px; } .info-list li { margin-bottom: 12px; } .start-button { display: inline-block; margin-top: 30px; background-color: #394F6F; color: #ffffff; padding: 12px 24px; font-weight: bold; text-decoration: none; border-radius: 6px; transition: background 0.3s; } .start-button:hover { background-color: #8A9CC9; color: #ffffff; } /* mitglieder.html ; angebote.html ; gesuche.hmtl */ /* Buttons Eigene Angebote ; eigene Gesuche */ .angebot-aktionen { display: flex; gap: 16px; margin-bottom: 24px; justify-content: flex-start; align-items: center; } .gesuch-aktionen { display: flex; gap: 16px; margin-bottom: 24px; justify-content: flex-start; align-items: center; } /* Suchfeld */ .search-row { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; } .search-label { font-family: 'Khand', sans-serif; font-weight: 600; font-size: 16px; color: #ffffff; } .search-input { flex: 1; padding: 10px 12px; font-size: 16px; border: none; border-radius: 4px; } .search-button { padding: 10px 20px; font-family: 'Khand', sans-serif; font-weight: 600; background-color: #ffffff; color: #2c2f39; border: none; border-radius: 4px; cursor: pointer; } /* Tabelle */ .table-wrapper { max-width: 100%; /* passt sich dem Viewport an */ overflow-x: auto; /* horizontal scrollen */ border: 1px solid #ccc; /* optionaler Rahmen */ background: white; /* falls du einen Hintergrund brauchst */ } .table-wrapper table { width: max-content; /* verhindert unnötiges Zusammenquetschen */ min-width: 100%; /* sorgt dafür, dass sie sich nicht kleiner zieht als der Viewport */ } .data-table { width: 100%; max-width: 100%; border-collapse: collapse; background-color: #1C294B; color: #ffffff; overflow-x: auto; } .table-scroll-wrapper { overflow-x: auto; } .data-table th, .data-table td { padding: 8px; border: 1px solid #444; text-align: left; } .data-table th { background-color: #1C294B; font-weight: 500; font-family: 'Khand', sans-serif; text-transform: uppercase; } .data-table td { background-color: #88A2E3; color: #1C294B; font-weight: 400; font-family: 'Khand', sans-serif; } .optional-column { display: table-cell; /* später per JS ein-/ausblenden */ } /* profil.html */ .profil-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .weitere-info-block, .stammdaten-block { background: #1C294B; color: #ffffff; padding: 30px; border-radius: 8px; font-family: 'Khand', sans-serif; } .weitere-info-block h3, .stammdaten-block h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; } .stammdaten-block p { line-height: 1.6; font-size: 16px; } .profil-form { display: flex; flex-direction: column; gap: 16px; font-size: 16px; } .form-row { display: flex; align-items: center; gap: 16px; } .form-row label { flex: 0 0 200px; color: #ccc; } .form-row input[type="email"], .form-row input[type="number"], .form-row input[type="password"], .form-row input[type="text"] { flex: 2; padding: 10px; font-size: 16px; border: none; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #fff; color: #000; } .form-actions { display: flex; gap: 16px; margin-top: 30px; } /* admin */ .dropdown-aktionen { padding: 10px 20px; font-family: 'Khand', sans-serif; font-weight: 600; background-color: #ffffff; color: #2c2f39; border: none; border-radius: 4px; background-color: white; cursor: pointer; } .dropdown-aktionen:focus { outline: none; border-color: #d9775e; /* deine Akzentfarbe */ } /* footer */ .site-footer { flex-shrink: 0; background: #2b0d3a; color: #fff; height: 70px; display: flex; align-items: left; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; } .footer-logo { height: 80px; width: auto; display: block; opacity: 0.95; } .footer-links { display: flex; gap: 24px; } .footer-links a { color: #fff; text-decoration: none; font-family: 'Khand', sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: .5px; opacity: .9; } .footer-links a:hover { opacity: 1; } /* popup */ .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 999; } .popup-content { background: #1C294B; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%; color: #fff; } .popup.hidden { display: none; } #angebot-form input { display: block; width: 100%; margin-bottom: 16px; padding: 10px; font-size: 16px; border-radius: 4px; border: none; } /* popup Tabelle anpassen */ .cols-modal.hidden { display: none; } .cols-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 2000; } .cols-modal__box { background: #1e1f26; color: #fff; width: min(520px, 92vw); border-radius: 10px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .cols-list { display: grid; grid-template-columns: repeat(2, minmax(180px,1fr)); gap: 12px 18px; margin: 16px 0 14px; } .cols-list label { display: flex; gap: 8px; align-items: center; font-size: 16px; } .cols-actions { display: flex; gap: 12px; justify-content: flex-end; } /* === Alerts === */ .alert { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 8px; font-family: 'Khand', sans-serif; font-size: 18px; margin: 20px auto; max-width: 900px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); border-left: 6px solid transparent; animation: fadeIn 0.4s ease-out; } /* Varianten */ .alert-success { background-color: #1C294B; color: #b8ffb8; border-left-color: #4CAF50; } .alert-warning { background-color: #394F6F; color: #fff6b3; border-left-color: #FFC107; } .alert-danger { background-color: #2b0d3a; color: #ffb3b3; border-left-color: #F44336; } .alert-info { background-color: #88A2E3; color: #1C294B; border-left-color: #2196F3; } /* sanfte Einblendung */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .members-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: transparent; /* Farben kommen von .data-table */ } .members-table th, .members-table td { padding: 8px 10px; /* etwas dichter als Standard */ } .members-table thead th { text-align: left; font-weight: 600; } .members-table tbody tr:hover { /* sanfter Hover auf dem Zeilen-Hintergrund */ background: rgba(255, 255, 255, 0.08); } .members-table .actions-col { white-space: nowrap; text-align: right; } /* Icon-Buttons in der Aktionsspalte */ .icon-button { border: none; background: none; cursor: pointer; font-size: 1rem; padding: 0.15rem 0.3rem; line-height: 1; color: inherit; /* übernimmt Tabellenfarbe */ } .icon-button + .icon-button, .inline-form + .inline-form { margin-left: 0.35rem; } .inline-form { display: inline; } .icon-danger { opacity: 0.8; } .icon-danger:hover { opacity: 1; }