diff --git a/css/style.css b/css/style.css
index 0a7a6ac..9a6779f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2441,35 +2441,215 @@ textarea {
text-align: center;
}
+/* ===========================
+ Hamburger Menu Button
+ =========================== */
+
+.nav-toggle {
+ display: none;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ width: 44px;
+ height: 44px;
+ background: rgba(255, 20, 147, 0.1);
+ border: 2px solid rgba(255, 20, 147, 0.3);
+ border-radius: 10px;
+ cursor: pointer;
+ padding: 8px;
+ transition: all 0.3s ease;
+ z-index: 200;
+}
+
+.nav-toggle span {
+ display: block;
+ width: 22px;
+ height: 2px;
+ background: #ff1493;
+ border-radius: 2px;
+ transition: all 0.3s ease;
+ transform-origin: center;
+}
+
+.nav-toggle:hover {
+ background: rgba(255, 20, 147, 0.2);
+ border-color: #ff1493;
+}
+
+/* Hamburger → X Animation */
+.nav-toggle.open span:nth-child(1) {
+ transform: translateY(7px) rotate(45deg);
+}
+.nav-toggle.open span:nth-child(2) {
+ opacity: 0;
+ transform: scaleX(0);
+}
+.nav-toggle.open span:nth-child(3) {
+ transform: translateY(-7px) rotate(-45deg);
+}
+
+body.dark .nav-toggle {
+ background: rgba(96, 165, 250, 0.1);
+ border-color: rgba(96, 165, 250, 0.3);
+}
+body.dark .nav-toggle span {
+ background: #60a5fa;
+}
+
/* ===========================
Responsive Design
=========================== */
+/* ---- Tablets (768px) ---- */
@media (max-width: 768px) {
- h1 {
- font-size: 1.8rem;
+
+ /* Header */
+ header {
+ padding: 0.75rem 1rem;
}
- h2 {
- font-size: 1.5rem;
+ .header-container {
+ flex-wrap: nowrap;
+ gap: 0.75rem;
+ align-items: center;
+ position: relative;
}
+ .logo {
+ flex: 1;
+ }
+
+ .logo img {
+ height: 38px;
+ }
+
+ .logo-text .institution {
+ font-size: 0.75rem;
+ }
+
+ .logo-text .project {
+ font-size: 0.85rem;
+ }
+
+ /* Dark Mode Button kleiner */
+ .dark-mode-toggle {
+ width: 42px;
+ height: 42px;
+ font-size: 1.3rem;
+ }
+
+ /* Hamburger anzeigen */
+ .nav-toggle {
+ display: flex;
+ }
+
+ /* Navigation als Dropdown */
+ nav#main-nav {
+ display: none;
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ right: 0;
+ background: rgba(255, 255, 255, 0.98);
+ backdrop-filter: blur(16px);
+ border: 2px solid rgba(255, 105, 180, 0.3);
+ border-radius: 16px;
+ padding: 0.75rem;
+ flex-direction: column;
+ gap: 0.25rem;
+ box-shadow: 0 8px 32px rgba(255, 20, 147, 0.15);
+ z-index: 150;
+ }
+
+ nav#main-nav.open {
+ display: flex;
+ }
+
+ nav#main-nav a {
+ display: block;
+ padding: 0.75rem 1rem;
+ border-radius: 10px;
+ font-size: 1rem;
+ font-weight: 500;
+ text-align: left;
+ transition: background 0.2s ease;
+ }
+
+ nav#main-nav a:hover,
+ nav#main-nav a.active {
+ background: rgba(255, 20, 147, 0.1);
+ text-decoration: none;
+ }
+
+ body.dark nav#main-nav {
+ background: rgba(15, 23, 42, 0.98);
+ border-color: #334155;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+ }
+
+ body.dark nav#main-nav a:hover,
+ body.dark nav#main-nav a.active {
+ background: rgba(96, 165, 250, 0.15);
+ }
+
+ /* Typography */
+ h1 { font-size: 1.8rem; }
+ h2 { font-size: 1.5rem; }
+ h3 { font-size: 1.2rem; }
+
+ /* Main & Sections */
+ main {
+ padding: 1rem;
+ }
+
+ section {
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .hero {
+ padding: 2rem 1.5rem;
+ }
+
+ /* Cards */
+ .cards {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+
+ .info-cards {
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ }
+
+ /* Galerie */
+ .galerie {
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ gap: 0.75rem;
+ }
+
+ /* Team */
+ .team-container {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ /* Notenrechner */
.calculator-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
- .compare-inputs,
- .search-inputs {
- grid-template-columns: 1fr;
- }
-
+ .calculator-tabs,
.analyzer-tabs {
- flex-direction: column;
+ flex-wrap: wrap;
+ gap: 0.5rem;
}
.tab-btn {
- width: 100%;
+ flex: 1;
+ min-width: 140px;
+ text-align: center;
}
.analyzer-buttons {
@@ -2483,40 +2663,6 @@ textarea {
.simple-input-group {
grid-template-columns: 1fr;
- gap: 0.8rem;
- }
-
- .simple-input-group .btn-calculate {
- width: 100%;
- }
-
- .calculator-tabs {
- flex-direction: column;
- }
-
- .calculator-tabs .tab-btn {
- width: 100%;
- }
-
- .stats-grid {
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
- gap: 0.8rem;
- }
-
- .stat-card {
- padding: 0.8rem;
- }
-
- .stat-number {
- font-size: 1.5rem;
- }
-
- .stat-label {
- font-size: 0.8rem;
- }
-
- .metrics-grid {
- grid-template-columns: 1fr;
}
.grade-input-wrapper {
@@ -2536,83 +2682,118 @@ textarea {
justify-content: space-around;
}
- .grade-remove-btn {
- order: 2;
- }
-
- .grade-separator {
- display: none;
- }
+ .grade-remove-btn { order: 2; }
+ .grade-separator { display: none; }
.average-display {
flex-direction: column;
gap: 1rem;
}
- .header-container {
- flex-direction: column;
- align-items: flex-start;
+ .compare-inputs,
+ .search-inputs {
+ grid-template-columns: 1fr;
}
- nav {
- width: 100%;
- flex-direction: column;
- gap: 0.5rem;
+ .metrics-grid {
+ grid-template-columns: 1fr;
}
- nav a {
- display: block;
- padding: 0.5rem;
- }
-
- section {
- padding: 1.5rem;
- }
-
- .hero {
- padding: 2rem 1.5rem;
- }
-
- .galerie {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ .stats-grid {
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
+/* ---- Smartphones (480px) ---- */
@media (max-width: 480px) {
- h1 {
- font-size: 1.5rem;
- }
-
- h2 {
- font-size: 1.25rem;
- }
+ /* Header */
header {
- padding: 1rem;
+ padding: 0.6rem 0.75rem;
}
+ .logo img {
+ height: 32px;
+ }
+
+ .logo-text .institution {
+ font-size: 0.7rem;
+ }
+
+ .logo-text .project {
+ font-size: 0.8rem;
+ }
+
+ .dark-mode-toggle {
+ width: 38px;
+ height: 38px;
+ font-size: 1.1rem;
+ }
+
+ .nav-toggle {
+ width: 38px;
+ height: 38px;
+ }
+
+ /* Typography */
+ h1 { font-size: 1.4rem; letter-spacing: 0; }
+ h2 { font-size: 1.2rem; }
+ h3 { font-size: 1.05rem; }
+
+ /* Main */
main {
- padding: 1rem;
+ padding: 0.75rem;
}
section {
padding: 1rem;
- margin-bottom: 1.5rem;
+ margin-bottom: 1rem;
+ border-radius: 12px;
}
- .cards {
+ .hero {
+ padding: 1.5rem 1rem;
+ }
+
+ .hero h1 {
+ font-size: 1.3rem;
+ }
+
+ /* Inputs & Buttons – Finger-friendly */
+ input, textarea, select {
+ font-size: 16px; /* verhindert Auto-Zoom auf iOS */
+ padding: 0.6rem 0.75rem;
+ }
+
+ button:not(.nav-toggle):not(.dark-mode-toggle) {
+ padding: 0.65rem 1rem;
+ font-size: 0.9rem;
+ min-height: 44px;
+ }
+
+ /* Cards – 1 Spalte */
+ .cards,
+ .info-cards {
grid-template-columns: 1fr;
+ gap: 0.75rem;
}
+ .card,
+ .info-card {
+ padding: 1rem;
+ }
+
+ /* Galerie */
.galerie {
- grid-template-columns: 1fr;
- gap: 1rem;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.5rem;
}
.galerie img {
- height: 200px;
+ height: 130px;
}
+ /* Team */
.team-container {
grid-template-columns: 1fr;
}
@@ -2621,10 +2802,51 @@ textarea {
flex-direction: column;
align-items: center;
text-align: center;
+ padding: 1.25rem 1rem;
}
.team-image {
- width: 150px;
- height: 150px;
+ width: 120px;
+ height: 120px;
+ }
+
+ /* Notenrechner */
+ .grade-input-row {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .grade-points,
+ .grade-max {
+ width: 100%;
+ }
+
+ .grade-result {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.3rem;
+ }
+
+ .stat-card {
+ padding: 0.75rem;
+ }
+
+ .stat-number {
+ font-size: 1.3rem;
+ }
+
+ /* Tabellen horizontal scrollbar */
+ table {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ font-size: 0.85rem;
+ }
+
+ /* Footer */
+ footer {
+ padding: 1rem;
+ font-size: 0.85rem;
+ text-align: center;
}
}
diff --git a/eis_projekt.html b/eis_projekt.html
index 191b2d3..02247a3 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -22,7 +22,11 @@
-