/* Seite fuer Eltern & Fans (eltern.php) - baut auf fcws.css und anleitung.css auf */

/* ---------- Kopfbereich mit Handy ---------- */
.el-hero {
    color: var(--white); overflow: hidden; position: relative;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center;
    padding: 2.6rem max(1.2rem, calc((100vw - 1040px) / 2)) 2.4rem;
    background:
        radial-gradient(700px 420px at 85% 30%, rgba(255, 210, 63, .14), transparent 60%),
        radial-gradient(800px 460px at 15% 10%, rgba(46, 75, 255, .4), transparent 60%),
        linear-gradient(160deg, #060b2e 0%, #0a1140 55%, #131f6e 100%);
}
.el-hero h1 {
    margin: .3rem 0 .8rem; font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
    font-size: clamp(2.5rem, 7.5vw, 4.4rem); line-height: .92;
}
.el-hero h1 span { color: var(--accent); }
.el-lead { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .9); font-size: 1.05rem; line-height: 1.55; }
.el-datum {
    display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: .35rem .8rem; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; font-size: .9rem;
}
.el-datum i { color: var(--accent); }

.el-stores { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.el-store {
    display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: 12px;
    background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .35);
    transition: transform .2s, box-shadow .2s;
}
.el-store:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); color: #fff; }
.el-store i { font-size: 1.9rem; }
.el-store span { display: flex; flex-direction: column; font-weight: 700; font-size: 1.15rem; line-height: 1.05; }
.el-store small { font-weight: 500; font-size: .7rem; opacity: .85; }
/* Auf dem Handy den passenden Store betonen */
.el-mobil .el-store:not(.el-store-passend) { opacity: .55; transform: scale(.94); }
.el-store-passend { box-shadow: 0 0 0 3px var(--accent); }

.el-qr-klein { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; color: rgba(255, 255, 255, .75); font-size: .85rem; }
.el-qr-klein .el-qr { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
.el-mobil .el-qr-klein { display: none; }

/* Nachgebautes Handy mit Sperrbildschirm */
.el-handy { display: flex; justify-content: center; }
.el-handy-rahmen {
    position: relative; width: 300px; height: 560px; border-radius: 44px; padding: 64px 14px 20px;
    background:
        radial-gradient(260px 220px at 30% 20%, rgba(46, 75, 255, .75), transparent 70%),
        radial-gradient(240px 240px at 80% 90%, rgba(255, 210, 63, .35), transparent 70%),
        linear-gradient(170deg, #1a2fd8, #0a1140 70%);
    border: 10px solid #05081f; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .08);
    transform: rotate(3deg);
}
.el-handy-kamera { position: absolute; top: 14px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 14px; background: #05081f; }
.el-handy-uhr { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 3.8rem; line-height: 1; }
.el-handy-datum { text-align: center; font-size: .85rem; opacity: .85; margin-bottom: 1.2rem; }
.el-push {
    background: rgba(255, 255, 255, .88); color: #12141d; border-radius: 16px; padding: .55rem .75rem; margin-bottom: .55rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25); font-size: .78rem; line-height: 1.3;
    opacity: 0; transform: translateY(-14px) scale(.96); animation: pushRein .7s cubic-bezier(.16, 1, .3, 1) forwards;
}
.el-push-1 { animation-delay: .5s; }
.el-push-2 { animation-delay: 1.6s; }
.el-push-3 { animation-delay: 2.7s; }
@keyframes pushRein { to { opacity: 1; transform: none; } }
.el-push-kopf { display: flex; align-items: center; gap: .35rem; font-size: .62rem; letter-spacing: .04em; color: #555; margin-bottom: .15rem; }
.el-push-kopf img { width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.el-push-kopf em { margin-left: auto; font-style: normal; }
.el-push strong { display: block; font-size: .82rem; }

/* ---------- Schritte ---------- */
.el-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.el-schritte li {
    display: flex; gap: .8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
    box-shadow: 0 6px 18px rgba(10, 17, 64, .06);
}
.el-schritte li > b {
    flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: var(--white);
    display: grid; place-items: center; font-family: var(--font-head); font-size: 1.6rem;
}
.el-schritte strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.3rem; text-transform: uppercase; }
.el-schritte span { color: var(--grey); font-size: .92rem; }
.el-folgen { background: var(--accent); color: var(--navy); padding: 0 .35rem; border-radius: 4px; white-space: nowrap; }

/* ---------- Funktionen ---------- */
.el-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.el-karte {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
    display: flex; flex-direction: column; gap: .3rem; transition: transform .2s, box-shadow .2s;
}
.el-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10, 17, 64, .1); }
.el-karte i {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem;
    background: linear-gradient(135deg, var(--blue), var(--blue-bright)); color: var(--white); margin-bottom: .3rem;
}
.el-karte strong { color: var(--navy); font-family: var(--font-head); font-size: 1.2rem; text-transform: uppercase; }
.el-karte span { color: var(--grey); font-size: .9rem; }

.el-vorschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: 1.2rem; }
.el-vorschau p { margin: 0; color: var(--grey); }
.el-meine {
    border-radius: 16px; padding: .8rem .9rem .6rem; color: #fff;
    background: linear-gradient(135deg, #0a1140, #1a2fd8); box-shadow: 0 14px 30px rgba(10, 17, 64, .3);
}
.el-meine-kopf { font-family: var(--font-head); font-weight: 800; color: var(--accent); letter-spacing: .04em; margin-bottom: .5rem; }
.el-meine-zeile { display: flex; align-items: center; gap: .7rem; }
.el-meine-zeile img { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 4px; object-fit: contain; }
.el-meine-zeile div { flex: 1; min-width: 0; }
.el-meine-zeile b { display: block; }
.el-meine-zeile span { font-size: .8rem; opacity: .8; }
.el-meine-zeile em { font-style: normal; font-weight: 800; background: var(--accent); color: var(--navy); padding: .2rem .55rem; border-radius: 8px; }
.el-meine small { display: block; margin-top: .5rem; font-size: .72rem; opacity: .6; }

/* ---------- Turniere ---------- */
.el-termine { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.el-tag { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.el-tag strong { color: var(--navy); font-family: var(--font-head); font-size: 1.15rem; text-transform: uppercase; margin-bottom: .2rem; }
.el-tag b { color: var(--blue); display: inline-block; min-width: 3.2em; }
.el-tag em { font-style: normal; font-size: .75rem; background: var(--off-white); border-radius: 4px; padding: 0 .3rem; color: var(--grey); }

/* ---------- Fragen ---------- */
.el-fragen { display: grid; gap: .5rem; }
.el-fragen details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; }
.el-fragen summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.el-fragen p { margin: .5rem 0 0; color: var(--grey); }

/* ---------- Weitergeben ---------- */
.el-weiter {
    background: linear-gradient(160deg, #0a1140, #131f6e); color: var(--white); border-radius: var(--radius); padding: 1.4rem;
}
.el-weiter h2 { color: var(--white) !important; }
.el-weiter p { color: rgba(255, 255, 255, .85); margin: 0 0 1rem; }
.el-weiter-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.el-knopf {
    display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 8px; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: var(--white); font: inherit; font-weight: 700; text-decoration: none;
}
.el-knopf:hover { background: rgba(255, 255, 255, .2); color: var(--white); }
.el-wa { background: #25d366; color: #fff; }
.el-wa:hover { background: #1ebe5a; }
.el-druck { background: var(--accent); color: var(--navy); }
.el-druck:hover { background: #ffdc5e; color: var(--navy); }
.el-link { margin-top: .9rem; font-size: .85rem; color: rgba(255, 255, 255, .6); word-break: break-all; }

/* Flyer nur im Druck */
.el-flyer { display: none; }

@media (max-width: 860px) {
    .el-hero { grid-template-columns: 1fr; padding-top: 1.8rem; }
    .el-handy-rahmen { transform: none; width: 290px; height: 540px; }
    .el-schritte, .el-karten { grid-template-columns: 1fr; }
    .el-vorschau { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1000px) {
    .el-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Druck: A4-Flyer ---------- */
@media print {
    @page { size: A4; margin: 12mm; }
    body.el-body { background: #fff !important; }
    body.el-body > *:not(.el-flyer) { display: none !important; }
    .el-flyer {
        display: flex !important; flex-direction: column; height: 270mm; color: #0a1140; font-family: 'Inter', sans-serif;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .el-flyer-kopf { display: flex; align-items: center; gap: 5mm; padding: 5mm 7mm; background: #0a1140; color: #fff; border-radius: 4mm; }
    .el-flyer-kopf img { width: 18mm; }
    .el-flyer-kopf strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22pt; text-transform: uppercase; }
    .el-flyer-kopf span { color: #ffd23f; font-weight: 700; font-size: 13pt; }
    .el-flyer h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 60pt; line-height: .9; margin: 12mm 0 4mm; }
    .el-flyer-lead { font-size: 15pt; font-weight: 600; color: #1a2fd8; margin: 0 0 8mm; }
    .el-flyer-vorteile { display: flex; gap: 5mm; margin-bottom: 10mm; }
    .el-flyer-vorteile div {
        flex: 1; background: #eef1f8; border-radius: 4mm; padding: 5mm; font-size: 11pt; color: #444;
        border-top: 1.5mm solid #1a2fd8;
    }
    .el-flyer-vorteile span { display: block; font-size: 22pt; margin-bottom: 2mm; }
    .el-flyer-vorteile strong {
        display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15pt;
        text-transform: uppercase; color: #0a1140;
    }
    .el-flyer-mitte { display: flex; gap: 10mm; align-items: center; flex: 1; }
    .el-flyer ol { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 7mm; font-size: 16pt; line-height: 1.3; }
    .el-flyer li { display: flex; align-items: flex-start; gap: 4mm; }
    .el-flyer li b {
        flex: none; display: grid; place-items: center; width: 12mm; height: 12mm; border-radius: 50%;
        background: #1a2fd8; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 18pt;
    }
    .el-flyer li div { padding-top: 1.5mm; }
    .el-flyer li small { display: block; color: #667085; font-size: 11pt; }
    .el-flyer-qr { text-align: center; border: 1.2mm solid #ffd23f; border-radius: 5mm; padding: 6mm; }
    .el-flyer-qr span { display: block; margin-top: 3mm; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16pt; text-transform: uppercase; }
    .el-flyer-fuss { margin: 8mm 0 0; padding-top: 4mm; border-top: .6mm solid #dfe4f1; text-align: center; font-size: 12pt; color: #667085; }
}