/* movtel.de — Design D "Netz-Plan" (Techno-Brutalismus) */
:root {
  --ink: #111111;
  --paper: #ffffff;
  --grey: #f2f2f2;
  --red: #e63b1f;
  --blue: #1743e6;
  --yel: #ffd11a;
  --mut: #555555;
  --sans: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: "Consolas", "Courier New", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header (hartes Raster) ---------- */
.mhead { display: flex; align-items: stretch; border-bottom: 3px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 60; }
.mhead-logo { padding: 18px 26px; font-size: 26px; font-weight: 900; letter-spacing: -1px; border-right: 3px solid var(--ink); display: flex; align-items: center; white-space: nowrap; }
.mhead-logo b { background: var(--red); color: #fff; padding: 0 6px; margin-left: 2px; }
.mhead-logo .tld { font-size: 13px; font-weight: 800; color: var(--mut); margin-left: 8px; align-self: flex-end; padding-bottom: 4px; }
.mhead-nav { display: flex; flex: 1; overflow-x: auto; }
.mhead-nav a { flex: 1; min-width: 86px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; border-right: 3px solid var(--ink); white-space: nowrap; }
.mhead-nav a:hover { background: var(--yel); }
.mhead-cta { display: flex; align-items: center; padding: 0 22px; background: var(--ink); color: #fff; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.mhead-cta:hover { background: var(--blue); }

/* ---------- Laufband ---------- */
.mstrip { background: var(--ink); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 10px 0; overflow: hidden; white-space: nowrap; border-bottom: 3px solid var(--ink); }
.mstrip span { margin: 0 24px; }
.mstrip i { color: var(--yel); font-style: normal; margin-right: 8px; }

/* ---------- Hero (Blaupausen-Raster) ---------- */
.mhero { display: grid; grid-template-columns: repeat(12, 1fr); border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.mhero-main { grid-column: span 8; padding: 50px 42px; border-right: 3px solid var(--ink);
  background: repeating-linear-gradient(0deg, transparent, transparent 39px, #eeeeee 39px, #eeeeee 40px),
              repeating-linear-gradient(90deg, transparent, transparent 39px, #eeeeee 39px, #eeeeee 40px); }
.mhero-kick { display: inline-block; background: var(--blue); color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; padding: 7px 14px; margin-bottom: 22px; }
.mhero-main h1 { font-size: 54px; line-height: 1.0; letter-spacing: -2px; text-transform: uppercase; margin-bottom: 22px; }
.mhero-main h1 span { background: var(--yel); padding: 0 8px; }
.mhero-main p { font-size: 16px; font-weight: 600; max-width: 520px; margin-bottom: 26px; }
.mbtn { display: inline-block; background: var(--red); color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; padding: 15px 30px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.mbtn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.mbtn.alt { background: var(--paper); color: var(--ink); margin-left: 12px; }
.mhero-side { grid-column: span 4; display: flex; flex-direction: column; }
.mcell { flex: 1; padding: 20px 24px; border-bottom: 3px solid var(--ink); display: flex; flex-direction: column; justify-content: center; }
.mcell:last-child { border-bottom: 0; }
.mcell .n { font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.mcell .l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-top: 2px; }
.mcell.y { background: var(--yel); }
.mcell.b { background: var(--blue); color: #fff; } .mcell.b .l { color: #cfd9ff; }
.mcell.r { background: var(--red); color: #fff; } .mcell.r .l { color: #ffd9d0; }

/* ---------- Sections Kopf ---------- */
.msec-head { display: flex; align-items: stretch; justify-content: space-between; margin: 60px 0 0; border: 3px solid var(--ink); background: var(--grey); }
.msec-head h2 { font-size: 24px; text-transform: uppercase; letter-spacing: -0.5px; padding: 14px 22px; display: flex; align-items: center; }
.msec-head .no { background: var(--ink); color: var(--yel); font-weight: 900; font-size: 18px; padding: 14px 22px; display: flex; align-items: center; }
.msec-head .all { background: var(--paper); border-left: 3px solid var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 14px 22px; display: flex; align-items: center; }
.msec-head .all:hover { background: var(--yel); }

/* ---------- Themen-Spalten (Startseite) ---------- */
.mtopics { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.mtopic { border-right: 3px solid var(--ink); padding: 24px 20px; position: relative; background: var(--paper); display: block; }
.mtopic:hover { background: var(--yel); }
.mtopic .big { position: absolute; top: 10px; right: 14px; font-size: 38px; font-weight: 900; color: #00000014; }
.mtopic .idx { font-weight: 900; font-size: 11.5px; color: var(--red); letter-spacing: 2px; }
.mtopic h3 { font-size: 20px; text-transform: uppercase; margin: 8px 0 10px; letter-spacing: -0.5px; }
.mtopic p { font-size: 13px; color: #333; min-height: 80px; }
.mtopic .cnt { display: inline-block; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 12px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Artikel-Zeilen (Startseite) ---------- */
.mrows { border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.mrow { display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center; padding: 16px 22px; border-bottom: 2px solid var(--ink); background: var(--paper); }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: var(--grey); }
.mrow .th { width: 150px; height: 84px; border: 2px solid var(--ink); overflow: hidden; background: var(--grey); }
.mrow .th img { width: 100%; height: 100%; object-fit: cover; }
.mrow .cat { display: inline-block; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 10px; border: 2px solid var(--ink); margin-bottom: 6px; }
.cat-s { background: var(--yel); } .cat-g { background: var(--red); color: #fff; }
.cat-e { background: var(--blue); color: #fff; } .cat-h { background: var(--ink); color: #fff; }
.mrow h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; }
.mrow p { font-size: 13px; color: var(--mut); margin-top: 4px; max-width: 640px; }
.mrow .arw { font-size: 22px; font-weight: 900; }

/* ---------- Topic-Seiten ---------- */
.thead { border-bottom: 3px solid var(--ink); background: var(--grey); }
.thead-in { max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.thead .kick { font-weight: 900; font-size: 12px; color: var(--red); letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 10px; }
.thead h1 { font-size: 40px; text-transform: uppercase; letter-spacing: -1.5px; line-height: 1.05; }
.thead p { font-size: 14.5px; color: var(--mut); margin-top: 10px; max-width: 620px; font-weight: 600; }
.thead .back { border: 2px solid var(--ink); background: var(--paper); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 10px 18px; box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; }
.thead .back:hover { background: var(--yel); }
.tgrid { max-width: 1180px; margin: 0 auto; padding: 30px 24px 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tcard { border: 3px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; }
.tcard:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.tcard .im { height: 150px; border-bottom: 3px solid var(--ink); overflow: hidden; background: var(--grey); }
.tcard .im img { width: 100%; height: 100%; object-fit: cover; }
.tcard .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tcard .tag { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 10px; border: 2px solid var(--ink); margin-bottom: 10px; }
.tcard h3 { font-size: 17.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.3px; margin-bottom: 8px; }
.tcard .ds { font-size: 13px; color: var(--mut); flex: 1; }
.tcard .rd { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--blue); text-transform: uppercase; }

/* ---------- Artikelseite ---------- */
.article-wrap { max-width: 860px; margin: 36px auto; padding: 0 24px; }
.article-breadcrumb { font-family: var(--mono); font-size: 12.5px; color: var(--mut); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
.article-breadcrumb a { color: var(--blue); font-weight: 700; }
.article-title { font-size: 38px; line-height: 1.1; letter-spacing: -1px; text-transform: uppercase; margin-bottom: 14px; }
.article-meta { font-family: var(--mono); font-size: 12.5px; color: var(--mut); margin-bottom: 26px; padding: 12px 16px; border: 2px solid var(--ink); background: var(--grey); text-transform: uppercase; letter-spacing: 1px; }
.article-hero-img { border: 3px solid var(--ink); margin-bottom: 30px; box-shadow: 8px 8px 0 var(--yel); }
.article-hero-img img { display: block; width: 100%; }
.article-content { border: 3px solid var(--ink); background: var(--paper); padding: 38px 44px; }
.article-content h2 { font-size: 24px; margin: 36px 0 16px; text-transform: uppercase; letter-spacing: -0.5px; padding: 10px 16px; background: var(--ink); color: #fff; display: inline-block; }
.article-content h3 { font-size: 18px; margin: 26px 0 10px; text-transform: uppercase; letter-spacing: -0.3px; border-left: 6px solid var(--red); padding-left: 12px; }
.article-content p { margin-bottom: 15px; font-size: 15.5px; }
.article-content ul, .article-content ol { margin: 0 0 18px 24px; }
.article-content li { margin-bottom: 8px; font-size: 15px; }
.article-content a { color: var(--blue); border-bottom: 2px solid var(--yel); font-weight: 600; }
.article-content a:hover { background: var(--yel); }
.data-table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 14px; border: 3px solid var(--ink); }
.data-table th { background: var(--ink); color: #fff; text-align: left; padding: 11px 13px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.data-table td { padding: 10px 13px; border-bottom: 2px solid var(--ink); border-right: 1px solid #ddd; }
.data-table tr:nth-child(even) { background: var(--grey); }
.data-table tr:hover td { background: #fff6d6; }
.article-note { background: var(--yel); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 16px 20px; margin: 22px 0; font-size: 14.5px; font-weight: 600; }
.article-faq { border: 2px solid var(--ink); background: var(--grey); padding: 16px 20px; margin-bottom: 12px; }
.article-faq h3 { margin: 0 0 8px; font-size: 15.5px; border: none; padding: 0; color: var(--blue); }
.article-faq p { margin: 0; }
.article-backlink { display: inline-block; margin-top: 28px; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; border: 2px solid var(--ink); padding: 10px 18px; box-shadow: 4px 4px 0 var(--ink); background: var(--paper); }
.article-backlink:hover { background: var(--yel); }

/* ---------- Ads (reserviert) ---------- */
.article-anzeige { display: inline-block; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; margin: 14px 0 0; border: 2px solid var(--ink); }
.article-ad { border: 3px dashed var(--ink); padding: 16px; margin: 24px 0; text-align: center; }
.article-ad a { border-bottom: none; display: inline-block; }
.article-ad img { display: block; margin: 0 auto; }
.ad-label { display: block; font-size: 10px; font-weight: 900; color: var(--mut); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.ad-text { background: #fff8db; border: 3px solid var(--ink); border-left: 10px solid var(--red); padding: 12px 16px; margin: 18px 0; font-size: 13.5px; }
.ad-text::before { content: "ANZEIGE // "; font-weight: 900; color: var(--red); }
.ad-hinweis { background: var(--grey); border: 2px solid var(--ink); border-left: 10px solid var(--red); padding: 14px 18px; margin: 26px 0 8px; font-size: 12px; }
.ad-hinweis p { margin: 0 0 8px; }
.ad-hinweis p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.mfoot { background: var(--ink); color: #cfcfcf; margin-top: 64px; border-top: 3px solid var(--ink); }
.mfoot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding: 46px 0 32px; }
.mfoot-logo { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.mfoot-logo b { background: var(--red); color: #fff; padding: 0 6px; }
.mfoot-brand p { font-size: 13.5px; margin-top: 14px; max-width: 320px; }
.mfoot-col h4 { color: var(--yel); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.mfoot-col a { display: block; font-size: 13.5px; margin-bottom: 9px; }
.mfoot-col a:hover { color: var(--yel); }
.mfoot-col span { display: block; font-size: 13.5px; margin-bottom: 9px; }
.mfoot-bottom { border-top: 1px solid #333; padding: 18px 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Legal ---------- */
.legal-wrap { max-width: 860px; margin: 40px auto 60px; padding: 0 24px; }
.legal-wrap h1 { font-size: 36px; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 6px; }
.legal-wrap .lkick { font-family: var(--mono); font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 24px; }
.legal-wrap h2 { font-size: 19px; margin: 30px 0 10px; text-transform: uppercase; padding: 8px 14px; background: var(--ink); color: #fff; display: inline-block; }
.legal-wrap p { font-size: 15px; margin-bottom: 12px; }
.legal-wrap a { color: var(--blue); border-bottom: 2px solid var(--yel); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .mhero { grid-template-columns: 1fr; }
  .mhero-main { grid-column: span 1; border-right: 0; border-bottom: 3px solid var(--ink); }
  .mhero-side { grid-column: span 1; }
  .mhero-main h1 { font-size: 38px; }
  .mtopics { grid-template-columns: 1fr 1fr; }
  .mtopic:nth-child(2n) { border-right: 0; }
  .mtopic { border-bottom: 3px solid var(--ink); }
  .tgrid { grid-template-columns: 1fr 1fr; }
  .mrow { grid-template-columns: 110px 1fr; }
  .mrow .arw { display: none; }
  .mrow .th { width: 110px; height: 66px; }
  .mfoot-grid { grid-template-columns: 1fr 1fr; }
  .article-content { padding: 26px 22px; }
}
@media (max-width: 640px) {
  .mhead-logo { font-size: 20px; padding: 14px 16px; }
  .mhead-cta { display: none; }
  .mtopics, .tgrid { grid-template-columns: 1fr; }
  .mtopic { border-right: 0; }
  .mrow { grid-template-columns: 1fr; }
  .mrow .th { width: 100%; height: 120px; }
  .mhero-main { padding: 30px 22px; }
  .thead-in { flex-direction: column; align-items: flex-start; }
  .article-title { font-size: 27px; }
}