/* DeutscheLernen.com — Light theme (German flag accents)
   White background, black text, red titles, yellow table headers
*/
:root{
  --de-black:#0b0b0b;
  --de-red:#dd0000;
  --de-gold:#ffce00;

  --bg:#ffffff;
  --text:#111111;
  --muted:rgba(0,0,0,.65);
  --border:rgba(0,0,0,.12);
  --soft:#f6f7f9;
}

html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--text)}
a:hover{color:var(--de-red)}
h1,h2,h3{color:var(--de-red);line-height:1.25}
p,li{line-height:1.75}

/* layout frame */
.dl-container{max-width:1100px;margin:0 auto;padding:18px 14px}
.dl-article{
  background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:18px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
}
@media(max-width:700px){.dl-article{padding:14px}}

/* quiz button */
.dl-quiz-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:var(--de-gold);color:#000;text-decoration:none;
  border:1px solid rgba(0,0,0,.15);font-weight:800
}
.dl-quiz-note{margin:.5rem 0 1rem;color:var(--muted)}

/* header */
.dl-header{background:#fff;border-bottom:1px solid var(--border)}
.dl-topbar{max-width:1100px;margin:0 auto;padding:14px 14px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.dl-brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#000}
.dl-brand__tag{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dl-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dl-nav a{color:#000;text-decoration:none;font-weight:700;font-size:13px;padding:8px 10px;border-radius:999px;border:1px solid transparent}
.dl-nav a:hover{border-color:var(--border);background:var(--soft)}
.dl-nav__cta{background:var(--de-gold);border:1px solid rgba(0,0,0,.15)}
.dl-flagline{height:6px;display:flex}
.dl-flagline span{display:block;flex:1}
.dl-flagline .blk{background:var(--de-black)}
.dl-flagline .red{background:var(--de-red)}
.dl-flagline .gld{background:var(--de-gold)}
.dl-flagline.sm{height:4px;border-radius:999px;overflow:hidden;max-width:220px;margin:0 auto 10px}

/* ticker */
.dl-ticker{background:#fff;border-bottom:1px solid var(--border)}
.dl-ticker__inner{max-width:1100px;margin:0 auto;padding:10px 14px;overflow:hidden}
.dl-ticker__track{display:flex;gap:10px;align-items:center;white-space:nowrap;will-change:transform;
  animation:dlMarquee var(--vf-speed,28s) linear infinite}
.dl-ticker__item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--soft);color:#000;text-decoration:none;font-size:13px;font-weight:700}
.dl-ticker__item:hover{background:#fff}
.dl-ticker__quiz{border-color:rgba(255,206,0,.75);background:rgba(255,206,0,.35)}
@keyframes dlMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* footer */
.dl-footer{background:#fff;border-top:1px solid var(--border);margin-top:24px}
.dl-footer__grid{max-width:1100px;margin:0 auto;padding:18px 14px;display:grid;gap:16px;grid-template-columns:1.2fr 1fr 1fr 1fr}
.dl-footer__logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--soft);border:1px solid var(--border)}
.dl-footer__muted{margin:.25rem 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.dl-footer__title{display:block;margin-bottom:8px;color:#000}
.dl-footer__col a{display:block;color:#000;text-decoration:none;font-size:13px;padding:6px 0;opacity:.9}
.dl-footer__col a:hover{opacity:1;text-decoration:underline;color:var(--de-red)}
.dl-social{display:flex;gap:8px;align-items:center}
.dl-social__icon{width:24px;display:inline-grid;place-items:center}
.dl-footer__bottom{max-width:1100px;margin:0 auto;padding:0 14px 16px}
.dl-footer__copy{margin:0;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:920px){.dl-footer__grid{grid-template-columns:1fr 1fr}.dl-topbar{flex-direction:column;align-items:flex-start}.dl-nav{justify-content:flex-start}}

/* tables */
.table-wrap{overflow:auto;max-width:100%;border-radius:12px;border:1px solid var(--border);background:#fff}
table{background:#fff;color:#111;border-collapse:collapse;width:100%}
th,td{padding:10px;border:1px solid var(--border);vertical-align:top}
table thead th{background:var(--de-gold);color:#000;font-weight:800}
table tr:first-child td{background:var(--de-gold);color:#000;font-weight:800}
tbody tr:nth-child(even) td{background:#fafafa}

/* ads */
.dl-ad{margin:18px 0}

/* ✅ DO NOT touch generic .container globally (header/footer may use it) */
  /* Scope only to main article area */
  main.dl-container{
    max-width:100% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Article: remove heavy frame on mobile */
  main.dl-container .dl-article{
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    padding:16px 14px !important; /* comfortable reading */
    background:#ffffff !important;
    color:#111111 !important;
  }

  /* Related block spacing */
  main.dl-container .dl-related{
    margin-top:18px !important;
  }

  /* Tables: full-width look, still scrollable if needed */
  main.dl-container .table-wrap{
    border-left:none !important;
    border-right:none !important;
    border-radius:0 !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    width:calc(100% + 28px) !important;
  }

  /* Keep ticker items readable */
  .dl-ticker__item{
    font-size:13px !important;
    padding:8px 12px !important;
  }
}

/* =========================================================
   MOBILE LAYOUT — keep content tight and readable (not loose)
   ========================================================= */
@media (max-width: 768px){
  html,body{
    margin:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    color:#111111 !important;
  }

  /* Keep normal page padding so it doesn't feel "loose" */
  main.dl-container{
    max-width:100% !important;
    margin:0 auto !important;
    padding:14px 12px !important;
  }

  /* Keep a light frame on mobile (smaller, cleaner) */
  main.dl-container .dl-article{
    border:1px solid rgba(0,0,0,.12) !important;
    border-radius:14px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.06) !important;
    padding:16px 14px !important;
    margin:0 !important;
    background:#ffffff !important;
    color:#111111 !important;
  }

  /* Tables: keep inside the card; allow horizontal scroll */
  main.dl-container .table-wrap{
    border-radius:12px !important;
    border:1px solid rgba(0,0,0,.12) !important;
    margin:12px 0 !important;
    width:100% !important;
  }

  /* Keep ticker readable */
  .dl-ticker__item{font-size:13px !important;}
}

/* =========================================================
   DESKTOP READING WIDTH — tighten articles (desktop only)
   ========================================================= */
@media (min-width: 992px){

  /* Main content wrapper */
  main.dl-container{
    max-width: 980px;      /* 👈 key value (adjust 900–1050 if you want) */
    margin: 0 auto;        /* center */
    padding: 24px 18px;    /* inner breathing space */
  }

  /* Article card */
  main.dl-container .dl-article{
    padding: 28px 30px;
    border-radius: 18px;
  }

  /* Tables stay aligned with text */
  main.dl-container .table-wrap{
    margin-left: 0;
    margin-right: 0;
  }
}