:root{
  --bg:#F3F6FB; --surface:#fff; --alt:#F7F9FD; --border:#E4E9F2;
  --text:#1B2A4A; --muted:#7A8AA8; --green:#4E9A2F; --greenA:#8cc046;
  --red:#D64545; --navy:#1B2A4A; --blue:#3F6FB0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--blue)}
.muted{color:var(--muted)}
.err{background:#FBE9E9;color:var(--red);padding:10px;border-radius:8px;font-size:14px}
.ok{background:#EBF4DF;color:var(--green);padding:10px;border-radius:8px;font-size:14px}

/* Auth */
.auth-body{display:grid;place-items:center;min-height:100vh}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;width:340px;box-shadow:0 4px 24px rgba(27,42,74,.06)}
.auth-card h2{margin:6px 0 18px;font-size:20px}
.auth-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.auth-card input{width:100%;margin-top:5px;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:14px}
.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700}
.brand b{color:var(--greenA);font-weight:700}
.brand-bar{width:9px;height:22px;background:var(--greenA);border-radius:3px;display:inline-block}

/* Buttons */
.btn-primary{background:var(--greenA);color:#173a05;border:0;border-radius:9px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;width:100%}
.btn-sm{background:var(--greenA);color:#173a05;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;width:auto}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer}
.icon-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px}

/* Topbar */
.topbar{background:var(--navy);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .brand b{color:var(--greenA)}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:8px}
.nav button{background:transparent;color:#B9C4DA;border:1px solid transparent;padding:6px 12px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600}
.nav button.active{background:rgba(140,192,70,.22);color:#fff;border-color:var(--greenA)}
.top-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.top-right select,.top-right .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}

.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 70px}
.section{display:none}
.section.active{display:block}

/* Cards & stats */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(27,42,74,.04)}
.card+.card{margin-top:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.card-head h3{font-size:14px;font-weight:700;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat .lab{color:var(--muted);font-size:12px;margin-bottom:6px}
.stat .val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .sub{color:var(--muted);font-size:11px;margin-top:4px}
.pos{color:var(--green)} .neg{color:var(--red)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--muted);font-size:11px;text-align:left;padding:0 10px 8px;font-weight:600}
td{padding:9px 10px;border-top:1px solid var(--border);vertical-align:middle}
.r{text-align:right}
.badge{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge.win{color:var(--green);background:#EBF4DF}
.badge.loss{color:var(--red);background:#FBE9E9}

/* Calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{text-align:center;color:var(--muted);font-size:10px;font-weight:600;padding-bottom:4px}
.cal .cell{border:1px solid var(--border);border-radius:6px;min-height:50px;padding:4px 5px;display:flex;flex-direction:column;justify-content:space-between}
.cal .cell .d{font-size:10px;color:var(--muted)}
.cal .cell .p{font-size:11px;font-weight:700}

/* Day cards */
.day{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.day .net{font-weight:700}
.day .metrics{margin-left:auto;display:flex;gap:22px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}

/* Breakdown */
.bd-head,.bd-row{display:grid;grid-template-columns:1.5fr .6fr .6fr 1fr;align-items:center}
.bd-head{font-size:11px;color:var(--muted);padding:0 4px 8px;border-bottom:1px solid var(--border)}
.bd-row{font-size:13px;padding:9px 4px;border-bottom:1px solid var(--alt)}

/* Report grid */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.metrics-grid .m{padding:12px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.metrics-grid .m .lab{color:var(--muted);font-size:11.5px;margin-bottom:4px}
.metrics-grid .m .val{font-weight:700;font-size:16px}

/* Inputs */
.field{display:block;margin-top:12px}
.field span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
input,select,textarea{font-family:inherit}
.inp{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(27,42,74,.35);display:none;place-items:center;padding:16px;z-index:50}
.modal-bg.open{display:grid}
.modal{background:var(--surface);border-radius:16px;padding:22px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 16px;font-size:17px}
.row-end{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

.empty{display:grid;place-items:center;min-height:90px;color:var(--muted);font-size:13px;text-align:center;padding:16px}
.chart-box{height:230px;position:relative}
iframe.tv{width:100%;height:460px;border:0;display:block;border-radius:10px}

@media(max-width:820px){.grid2{grid-template-columns:1fr}}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Articoli in Tedesco – Studentebox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.article{ max-width:900px; margin:40px auto; font-family: 'Arial', sans-serif; font-size:18px; line-height:1.75; color:#111; }
.article h2{ color:#000; border-bottom: 4px solid #FFCC00; display:inline-block; font-size:30px; margin-bottom:10px; }
.subtitle{ font-style:italic; color:#666; margin-bottom:20px; }
.player{ margin:20px 0 30px; background:#eee; padding:10px; border-radius:8px; }
.highlight{ border-left:5px solid #DD0000; padding-left:16px; background:#f9f9f9; padding:20px; text-align:justify; }
.toggle{ margin:30px 0; }
.toggle button{ background:#000; color:#fff; border:none; padding:12px 20px; border-radius:6px; cursor:pointer; font-weight:bold; }
.full{ display:none; margin-top:30px; }
.box{ margin-top:30px; padding:20px; border:1px solid #ddd; border-radius:8px; background:#fff; }
.box h3{ color:#DD0000; margin-top:0; border-bottom:1px solid #eee; padding-bottom:10px; }
.vocab{ width:100%; border-collapse:collapse; }
.vocab td{ padding:8px; border-bottom:1px solid #eee; }
.quiz label{ display:block; margin:10px 0; cursor:pointer; }
.quiz button{ margin-top:10px; background:#DD0000; color:#fff; border:none; padding:8px 15px; border-radius:4px; cursor:pointer; }
.nav{ margin:50px 0 10px; display:flex; justify-content:space-between; }
.nav a{ color:#000; font-weight:bold; text-decoration:none; border-bottom:2px solid #FFCC00; }

:root{
    --black:#000000;
    --red:#DD0000;
    --gold:#FFCC00;
    --yellow:#f2b705;
}
body{margin:0;font-family:Georgia,"Times New Roman",serif;background:#fff;color:#000;}
.container{max-width:1200px;margin:auto;padding:30px 24px;}
.header{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--black);padding-bottom:16px;}
.header-left{display:flex;align-items:center;gap:14px;}
.header-left img{width:60px;}
.header h1{font-size:38px;margin:0;color:var(--black);}
.flags img{width:48px;cursor:pointer;transition:.2s;}
.flags img:hover{transform:scale(1.1);}
.hero-img img{width:100%;border-radius:10px;object-fit:cover;max-height:260px;margin:40px 0;}
.method{margin:30px 0;padding-left:16px;border-left:6px solid var(--gold);font-size:18px;line-height:1.7;}
#preview{margin-top:40px;padding:20px;border:1px solid #ddd;border-radius:10px;}
.separator{height:6px;background:linear-gradient(90deg,var(--black),var(--red),var(--gold));margin:60px 0;border-radius:6px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{border:1px solid #ddd;border-radius:10px;padding:18px;transition:.2s;}
.card:hover{transform:scale(1.02);}
.card h3{margin:0;font-size:21px;color:var(--black);}
.card a{margin-top:14px;background:var(--black);color:#fff;padding:8px 14px;border-radius:6px;text-decoration:none;font-weight:bold;display:inline-block}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.grid{grid-template-columns:1fr;}.hero-img img{max-height:160px;}.flags img{width:38px;}.header h1{font-size:28px;}}
</style>
</head>

<body>
<div class="container">

<div class="header">
    <div class="header-left">
        <img src="/media/germanflag.webp" alt="Germania">
        <h1>Articoli in Tedesco</h1>
    </div>
    <div class="flags">
        <a href="/articoli/inglese/"><img src="/media/flag/england.webp"></a>
        <a href="/articoli/spagnolo/"><img src="/media/flag/espana.webp"></a>
        <a href="/articoli/francese/"><img src="/media/flag/france.jpg"></a>
        <a href="/articoli/tedesco/"><img src="/media/flag/german.jpg"></a>
    </div>
</div>

<div class="hero-img"><img src="/media/germanflag.webp" alt="Germania"></div>

<div class="method">
Impara il tedesco con articoli, audio, traduzione, grammatica e quiz. Metodo pratico e progressivo.
</div>

<div id="preview">
<style>
.article{ max-width:900px; margin:40px auto; font-family: 'Georgia', serif; font-size:18px; line-height:1.75; color:#111; }
.article h2{ color:#b40000; border-bottom: 3px solid #FFCC00; display:inline-block; font-size:30px; margin-bottom:10px; }
.subtitle{ font-style:italic; color:#666; margin-bottom:20px; }
.highlight{ border-left:5px solid #006400; padding-left:16px; background:#f4f9f4; padding:25px; text-align:justify; border-radius: 0 10px 10px 0; }
.toggle button{ background:#006400; color:#fff; border:none; padding:12px 24px; border-radius:6px; cursor:pointer; font-weight:bold; }
.box{ margin-top:30px; padding:25px; border:1px solid #eee; border-radius:12px; background:#fff; }
.box h3{ color:#006400; margin-top:0; border-bottom:2px solid #eee; padding-bottom:12px; }
.vocab td{ padding:8px; border-bottom:1px solid #eee; }
.quiz button{ margin-top:15px; background:#006400; color:#fff; border:none; padding:10px 20px; border-radius:4px; cursor:pointer; }
.nav{ margin:50px 0 20px; display:flex; justify-content:space-between; }
.nav a{ color:#006400; font-weight:bold; text-decoration:none; }
</style>

<div class="article">
    <h2>Weihnachten in Deutschland</h2>
    <div class="subtitle">Märkte, Lichter und besinnliche Traditionen</div>

    <div class="highlight">
        <p>Weihnachten ist in Deutschland das wichtigste Familienfest des Jahres. Die Vorbereitungen beginnen bereits vier Wochen vorher mit der Adventszeit. Ein zentrales Symbol ist der Adventskranz mit seinen vier Kerzen; an jedem Sonntag im Dezember wird eine weitere Kerze angezündet. Kinder freuen sich besonders auf den Adventskalender, der die Wartezeit bis zum heiligen Abend mit kleinen Überraschungen verkürzt. In fast jeder Stadt locken zudem die traditionellen Weihnachtsmärkte mit dem Duft von Glühwein, gebrannten Mandeln und Lebkuchen Millionen von Besuchern an.</p>
        <p>Am 6. Dezember feiert man den Nikolaustag. In der Nacht zuvor stellen die Kinder ihre geputzten Stiefel vor die Tür, in der Hoffnung, dass der heilige Nikolaus sie mit Süßigkeiten und Nüssen füllt. Der eigentliche Höhepunkt ist jedoch der 24. Dezember, der Heilige Abend. Im Gegensatz zu vielen anderen Ländern findet die Bescherung, also das Auspacken der Geschenke, in Deutschland bereits an diesem Abend statt, oft unter einem festlich geschmückten Tannenbaum. Klassische Gerichte für diesen Abend sind entweder ganz einfach (Kartoffelsalat mit Würstchen) oder sehr festlich (Gänsebraten mit Rotkohl).</p>
        <p>Die Zeit zwischen den Jahren, oft „zwischen den Jahren“ genannt, ist geprägt von Ruhe und Besinnlichkeit. Viele Deutsche nutzen diese Tage für Spaziergänge in der Natur oder Besuche bei Verwandten. Weihnachten in Deutschland ist eine Mischung aus christlichen Bräuchen und alten germanischen Traditionen, die eine ganz besondere, fast magische Atmosphäre schaffen, die „weihnachtliche Vorfreude“.</p>
    </div>

    <div class="toggle"><button onclick="document.getElementById('fullDe9').style.display='block'">Vollständigen Artikel lesen / Traduzione</button></div>

    <div class="full" id="fullDe9" style="display:none;">
        <div class="box">
            <h3>Traduzione in italiano</h3>
            <p>Il Natale in Germania è la festa familiare più importante. Inizia con l'Avvento, simboleggiato dalla corona con quattro candele. I mercatini di Natale attirano milioni di persone con il profumo di vin brulé e pan di zenzero. Il 6 dicembre si festeggia San Nicola, mentre il culmine è il 24 dicembre (Heilige Abend), quando avviene la consegna dei regali (Bescherung). L'atmosfera è un mix di tradizioni cristiane e antiche usanze germaniche.</p>
        </div>

        <div class="box">
            <h3>Wortschatz (Vocabolario)</h3>
            <table class="vocab" style="width:100%">
                <tr><td><strong>Die Vorbereitung</strong></td><td>La preparazione</td></tr>
                <tr><td><strong>Die Kerze</strong></td><td>La candela</td></tr>
                <tr><td><strong>Verkürzen</strong></td><td>Accorciare / Abbreviare</td></tr>
                <tr><td><strong>Der Duft</strong></td><td>Il profumo</td></tr>
                <tr><td><strong>Der Stiefel</strong></td><td>Lo stivale</td></tr>
                <tr><td><strong>Die Bescherung</strong></td><td>La consegna dei regali</td></tr>
                <tr><td><strong>Schmücken</strong></td><td>Decorare / Adornare</td></tr>
                <tr><td><strong>Die Vorfreude</strong></td><td>La gioia dell'attesa</td></tr>
                <tr><td><strong>Geprägt von</strong></td><td>Caratterizzato da</td></tr>
                <tr><td><strong>Besinnlich</strong></td><td>Riflessivo / di raccoglimento</td></tr>
            </table>
        </div>

        <div class="box">
            <h3>Grammatik: Präpositionen mit Dativ</h3>
            <p>Alcune preposizioni reggono sempre il caso <strong>Dativo</strong>: <em>mit, nach, von, zu, bei, seit, aus</em>.</p>
            <p>Beispiel: <em>Ich gehe <strong>mit</strong> mein<strong>em</strong> Bruder (m) zum Markt.</em></p>
        </div>
    </div>
</div></div>
<div class="separator"></div>

<div class="grid">
<div class="card">
<h3>Künstliche Intelligenz in der Arbeitswelt</h3>
<a href="?art=1#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Die Energiewende in Deutschland</h3>
<a href="?art=2#preview">LEGGI →</a>
</div>
<div class="card">
<h3>35 Jahre Mauerfall: Ein Volk findet zusammen</h3>
<a href="?art=3#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Brot, Bier und Tradition</h3>
<a href="?art=4#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Mehr als nur ein Spiel</h3>
<a href="?art=5#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Lernen für die Zukunft</h3>
<a href="?art=6#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Weihnachten in Deutschland</h3>
<a href="?art=7#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Das Land der Dichter und Denker</h3>
<a href="?art=8#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Weihnachten in Deutschland</h3>
<a href="?art=9#preview">LEGGI →</a>
</div>
<div class="card">
<h3>Lernen für die Zukunft</h3>
<a href="?art=10#preview">LEGGI →</a>
</div>
</div>
<div style="
    margin-top:60px;
    padding:40px;
    background:#fff7ea;
    border-top:6px solid #b40000;
    border-radius:12px;
    font-family:Georgia, 'Times New Roman', serif;
">

    <h2 style="color:#b40000; font-size:32px; margin-top:0;">
        📌 Il Metodo Studentebox
    </h2>

    <p style="font-size:19px; line-height:1.7; margin-bottom:20px;">
        Il percorso Studentebox nasce per aiutarti a migliorare la lingua spagnola
        attraverso una lettura guidata, naturale e progressiva.
        Ogni articolo è scritto in <strong>lingua reale</strong>, con audio, traduzione,
        vocabolario, regole grammaticali e quiz di verifica.
    </p>

    <p style="font-size:19px; line-height:1.7; margin-bottom:20px;">
        📚 <strong>Con l'abbonamento annuale</strong> ottieni accesso a:
    </p>

    <ul style="font-size:18px; line-height:1.65; margin-left:20px;">
        <li>Oltre <strong>100 articoli didattici</strong> come questi</li>
        <li>Materiale <strong>organizzato per temi</strong> (vita quotidiana, viaggi, lavoro, attualità, cultura…)</li>
        <li>Nuovi articoli aggiunti <strong>ogni settimana</strong></li>
        <li>Sezione dedicata alle <strong>regole grammaticali spiegate</strong> in italiano e in lingua madre</li>
        <li>Audio, comprensione, vocabolario e pratica continua</li>
        <li>Accesso da smartphone, tablet e PC senza limiti</li>
    </ul>

    <p style="font-size:20px; margin-top:25px;">
        💳 <strong>Costo abbonamento:</strong><br>
        ✔️ <strong>100€</strong> per una singola lingua (Spagnolo, Inglese, Francese o Tedesco)<br>
    </p>

    <hr style="border:none; border-top:2px solid #b40000; margin:30px 0;">

    <!-- 📩 FORM DI RICHIESTA INFORMAZIONI -->
  
<h3 style="color:#b40000; margin-bottom:10px;">Richiedi informazioni o abbonati</h3>


<form method="post" style="max-width:600px;">
    <input type="hidden" name="send_form" value="1">

    <label>Nome e Cognome</label><br>
    <input type="text" name="nome" required style="width:100%; padding:10px; margin:10px 0;">

    <label>Email</label><br>
    <input type="email" name="email" required style="width:100%; padding:10px; margin:10px 0;">

    <label>Messaggio</label><br>
    <textarea name="messaggio" required rows="4" style="width:100%; padding:10px; margin:10px 0;"></textarea>

    <button type="submit" style="
        background:#b40000; color:white;
        padding:12px 20px; border:none;
        border-radius:6px; font-size:18px;
        cursor:pointer; font-weight:bold;">
        📩 Invia richiesta
    </button>
</form>

</div>
</div>
</body>
</html>