/* GRUNDLAGEN */
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f9f9f9; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* HERO SECTION (Oben mit Login) */
.hero { 
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%); 
    color: white; padding: 80px 0; min-height: 400px; display: flex; align-items: center; 
}
.hero-grid { display: grid; grid-template-columns: 1fr 400px; gap: 50px; align-items: center; }
.hero-text h1 { font-size: 3em; margin: 0 0 20px 0; line-height: 1.2; }
.hero-text p { font-size: 1.2em; opacity: 0.9; }

/* LOGIN BOX */
.login-card { 
    background: white; padding: 30px; border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: #333; 
}
.login-card h2 { margin-top: 0; color: #2c3e50; }
.form-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
.btn-login { width: 100%; padding: 12px; background: #27ae60; color: white; border: none; border-radius: 6px; font-weight: bold; font-size: 1.1em; cursor: pointer; transition: transform 0.2s; }
.btn-login:hover { transform: scale(1.02); background: #219150; }

/* FEATURE SECTIONS (Zick-Zack Layout) */
.feature-section { padding: 80px 0; border-bottom: 1px solid #eee; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature-text h3 { font-size: 2em; color: #2c3e50; margin-bottom: 15px; }
.feature-text p { font-size: 1.1em; color: #666; }
.feature-list { list-style: none; padding: 0; margin-top: 20px; }
.feature-list li { margin-bottom: 10px; padding-left: 25px; position: relative; }
.feature-list li:before { content: '✓'; color: #27ae60; font-weight: bold; position: absolute; left: 0; }

/* MOCKUPS (Die "Screenshots") */
.mockup-window {
    background: white; border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    overflow: hidden; border: 1px solid #e0e0e0; transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    transition: transform 0.5s;
}
.mockup-window:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.mockup-header { background: #eee; padding: 10px; display: flex; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.mockup-body { padding: 20px; background: #f4f6f9; min-height: 200px; }

/* Mockup Elements (Simulierte UI) */
.ui-card { background: white; padding: 10px; border-radius: 6px; margin-bottom: 10px; border-left: 4px solid #ccc; display: flex; justify-content: space-between; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.ui-card.blue { border-left-color: #3498db; }
.ui-card.orange { border-left-color: #e67e22; }
.ui-badge { font-size: 0.7em; padding: 2px 6px; border-radius: 4px; color: white; background: #999; }
.ui-badge.blue { background: #3498db; }
.ui-badge.orange { background: #e67e22; }

/* DOKU & FAQ */
.docs-section { padding: 60px 0; background: white; }
.accordion { margin-top: 30px; }
.acc-item { border-bottom: 1px solid #eee; }
.acc-header { padding: 15px 0; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; color: #2c3e50; }
.acc-header:hover { color: #2980b9; }
.acc-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; color: #555; }
.acc-content p { margin-bottom: 15px; }

/* MOBILE */
@media (max-width: 768px) {
    .hero-grid, .feature-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-text { text-align: center; }
    .mockup-window { transform: none; margin-top: 20px; }
    .feature-grid .mockup-window { order: -1; } /* Bild immer oben auf Handy */
}
</style>