/**
 * Startseite Styles — schulunterricht.ch
 */
@import url('shared.css');

body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.shape-1 { width: 400px; height: 400px; background: var(--cyan); top: -100px; right: -100px; }
.shape-2 { width: 300px; height: 300px; background: var(--coral); bottom: -80px; left: -80px; animation-delay: -7s; }
.shape-3 { width: 200px; height: 200px; background: var(--blue); top: 40%; left: 50%; opacity: 0.06; animation-delay: -13s; }

header { position: relative; z-index: 1; text-align: center; padding: 4rem 2rem 1rem; animation: fadeUp 0.8s ease-out; }
.title { font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.title span { color: var(--blue); }
.dot { display: inline-block; width: 0.16em; height: 0.16em; background: var(--coral); border-radius: 50%; vertical-align: 0.15em; margin-left: 0.02em; }
.divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 2px; margin: 1.2rem auto; }
.subtitle { font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 300; color: var(--text-soft); max-width: 460px; margin: 0 auto; line-height: 1.6; }

main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 700px; width: 100%; }
.card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 2.5rem 2rem; text-align: center; text-decoration: none; color: var(--text); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; animation: fadeUp 0.8s ease-out both; }
.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.35s; }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; border-radius: 20px 20px 0 0; transition: height 0.4s ease; }
.card--lehrer::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.card--lernende::before { background: linear-gradient(90deg, var(--coral), #FFD4A8); }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); border-color: transparent; }
.card:hover::before { height: 6px; }
.card-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.8rem; }
.card--lehrer .card-icon { background: linear-gradient(135deg, rgba(35, 35, 255, 0.08), rgba(109, 225, 217, 0.12)); }
.card--lernende .card-icon { background: linear-gradient(135deg, rgba(255, 168, 154, 0.12), rgba(255, 212, 168, 0.12)); }
.card-title { font-family: 'DM Serif Display', serif; font-size: 1.5rem; font-weight: 400; margin-bottom: 0.6rem; }
.card-desc { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; margin-bottom: 1.5rem; }
.card-action { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 500; color: var(--blue); transition: gap 0.3s ease; }
.card--lernende .card-action { color: #E8785A; }
.card:hover .card-action { gap: 0.7rem; }
.card-action svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.card:hover .card-action svg { transform: translateX(3px); }
.lock-badge { position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.04); display: flex; align-items: center; justify-content: center; }
.lock-badge svg { width: 14px; height: 14px; color: var(--text-soft); opacity: 0.4; }

@media (max-width: 600px) {
    .cards { grid-template-columns: 1fr; max-width: 360px; }
    header { padding: 3rem 1.5rem 0.5rem; }
    main { padding: 1.5rem; }
    .shape-1 { width: 250px; height: 250px; }
    .shape-2 { width: 200px; height: 200px; }
    .shape-3 { display: none; }
}