/*
Theme Name: HitMag Child — Miet-Check
Theme URI: https://www.miet-check.de/Mietblog/
Description: Child-Theme von HitMag im Miet-Check-Markendesign (Navy-Topbar, Inter, Funnel-CTAs, kuratierte Sidebar). Reskin ohne Eingriff in die HitMag-Kernstruktur — upgrade-sicher.
Author: Miet-Check.de
Template: hitmag
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: hitmag-child
*/

/* ===========================================================
   Inter — self-hosted (kein Google-CDN, DSGVO-konform)
   =========================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-Regular.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-Medium.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Inter-Bold.ttf') format('truetype');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Inter-ExtraBold.ttf') format('truetype');}

/* ===========================================================
   Brand-Tokens
   =========================================================== */
:root{
  --mc-ground:#ffffff; --mc-surface:#f6f9fc; --mc-surface-2:#eef3f9;
  --mc-ink:#16222e; --mc-ink-soft:#41546a; --mc-ink-mute:#6b7d92;
  --mc-line:#e2e8f0; --mc-line-soft:#eef2f7;
  --mc-brand:#03273c; --mc-brand-2:#0a4f75; --mc-accent:#038edc; --mc-accent-ink:#0273b3;
  --mc-amber:#d97706; --mc-amber-bg:#fffbeb; --mc-amber-line:#fde68a;
  --mc-radius:14px; --mc-radius-sm:10px;
  --mc-shadow:0 1px 2px rgba(15,35,55,.05),0 8px 24px -12px rgba(15,35,55,.14);
  --mc-shadow-sm:0 1px 2px rgba(15,35,55,.05),0 4px 12px -8px rgba(15,35,55,.12);
  --mc-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ===========================================================
   Basis-Typografie
   =========================================================== */
body,
button, input, select, optgroup, textarea{
  font-family:var(--mc-font);
  color:var(--mc-ink);
}
body{ background:var(--mc-surface); line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ color:var(--mc-accent-ink); }
a:hover{ color:var(--mc-brand-2); }

/* HitMag-Container etwas breiter + luftiger */
.hm-container{ max-width:1180px; }
/* Full-Width: Box-Rahmen (Schatten) weg, Balken randlos wie auf der Hauptseite */
.hitmag-wrapper{ box-shadow:none !important; }
/* Abstand zwischen Breadcrumb/Nav und Inhalt + vor dem Footer */
#content.site-content{ padding-top:34px; padding-bottom:52px; }
@media (max-width:768px){ #content.site-content{ padding-top:24px; padding-bottom:36px; } }

/* ===========================================================
   BRAND TOPBAR (ersetzt HitMag-Header via header.php-Override)
   =========================================================== */
.mc-topbar{ background:var(--mc-brand); }
.mc-tb-in{ max-width:1180px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; gap:26px; }
/* Logo exakt wie auf miet-check.de: 24px, weight 500, weiß + .de in Akzentblau.
   !important = garantierter Schutz vor jeder Überfärbung. */
.mc-topbar .mc-logo, .mc-foot .mc-logo{ font-weight:500; font-size:24px; letter-spacing:0; color:#fff !important; text-decoration:none; white-space:nowrap; }
.mc-topbar .mc-logo:hover{ color:#fff !important; text-decoration:none; }
.mc-topbar .mc-logo b, .mc-foot .mc-logo b{ color:#038edc !important; font-weight:500; }
.mc-nav{ display:flex; align-items:center; gap:3px; margin-left:auto; }
.mc-nav a{ color:rgba(255,255,255,.82); font-size:.85rem; font-weight:500; padding:9px 12px; border-radius:8px; text-decoration:none; letter-spacing:.01em; }
.mc-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.mc-nav a.mc-active{ color:#fff; background:rgba(255,255,255,.10); }
.mc-nav a.mc-pill{ background:var(--mc-accent); color:#fff; font-weight:600; }
.mc-nav a.mc-pill:hover{ background:#0399ee; }
.mc-nav .mc-sep{ width:1px; height:22px; background:rgba(255,255,255,.14); margin:0 5px; }
.mc-burger{ display:none; margin-left:auto; background:none; border:0; color:#fff; cursor:pointer; padding:8px; }
@media (max-width:900px){
  .mc-nav{ display:none; position:absolute; left:0; right:0; top:64px; background:var(--mc-brand); flex-direction:column; gap:0; padding:8px 14px 16px; box-shadow:var(--mc-shadow); z-index:60; }
  .mc-nav.mc-open{ display:flex; }
  .mc-nav a{ width:100%; padding:11px 12px; }
  .mc-nav .mc-sep{ display:none; }
  .mc-burger{ display:inline-flex; }
}

/* Breadcrumb-Bar (via hitmag_before_content-Hook) */
.mc-crumb{ background:linear-gradient(180deg,var(--mc-surface-2),var(--mc-ground)); border-bottom:1px solid var(--mc-line); }
.mc-crumb-in{ max-width:1180px; margin:0 auto; padding:9px 24px; font-size:.78rem; color:var(--mc-ink-mute); display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.mc-crumb-in a{ color:var(--mc-accent-ink); text-decoration:none; }
.mc-crumb-in a:hover{ text-decoration:underline; }
.mc-crumb-in .s{ opacity:.5; }

/* ===========================================================
   Artikel — Typografie & Kopf
   =========================================================== */
/* Großer Titel NUR im Einzelbeitrag */
.single .entry-title{
  font-weight:800; letter-spacing:-.025em; line-height:1.14; color:var(--mc-ink);
  font-size:clamp(1.9rem,3.4vw,2.65rem); text-wrap:balance;
}
/* Kompakte Titel in Archiv/Listen (content.php) */
.hitmag-post .entry-title{
  font-size:1.3rem; font-weight:750; line-height:1.3; letter-spacing:-.01em; margin:2px 0 6px;
}
.hitmag-post .entry-title a{ color:var(--mc-ink); }
.hitmag-post .entry-title a:hover{ color:var(--mc-accent-ink); text-decoration:none; }
/* Abstände in Archiv-Karten + Doppel-Kategorie (Kachel-Badge) ausblenden */
.hitmag-post > a{ display:block; margin-bottom:14px; }
.hitmag-post .archive-thumb{ line-height:0; }
.hitmag-post .mc-tile-badge{ display:none; }
.hitmag-post .cat-links{ display:inline-block; margin-bottom:2px; }
.hitmag-post .entry-meta{ margin-top:6px; }
.hitmag-post .entry-summary{ margin-top:10px; }
.cat-links, .entry-header .cat-links a{
  text-transform:uppercase; letter-spacing:.09em; font-size:.72rem; font-weight:700;
  color:var(--mc-accent-ink) !important;
}
.entry-meta{ color:var(--mc-ink-mute); font-size:.85rem; }
.entry-meta a{ color:var(--mc-ink-mute); }

.entry-content{ font-size:1.0625rem; color:var(--mc-ink); }
.entry-content > *{ max-width:68ch; }
.entry-content p{ margin:0 0 1.25rem; }
.entry-content h2{ font-size:1.5rem; font-weight:750; letter-spacing:-.02em; margin:2.3rem 0 .9rem; line-height:1.25; }
.entry-content h3{ font-size:1.2rem; font-weight:700; margin:1.8rem 0 .6rem; }
.entry-content h2, .entry-content h3, .entry-content h4{ color:var(--mc-ink); }
.entry-content a{ color:var(--mc-accent-ink); text-decoration:underline; text-decoration-color:rgba(3,142,220,.35); text-underline-offset:2px; }
.entry-content a:hover{ text-decoration-color:var(--mc-accent); }
.entry-content ul li, .entry-content ol li{ margin:.4rem 0; }
.entry-content blockquote{
  border-left:3px solid var(--mc-accent); background:var(--mc-surface);
  margin:1.6rem 0; padding:14px 20px; border-radius:0 var(--mc-radius-sm) var(--mc-radius-sm) 0; color:var(--mc-ink-soft);
}
.entry-content img{ border-radius:var(--mc-radius); }
.hitmag-single .post-thumbnail img,
.single-featured-image img{ border-radius:var(--mc-radius); }

/* Heroic Table of Contents – an Brand angleichen */
.ht-toc, .heroic-toc, .ht-toc-list{ border-radius:var(--mc-radius-sm); }

/* ===========================================================
   Inline Funnel-CTA (via hitmag_after_single_post_content)
   =========================================================== */
.mc-inline-cta{
  margin:34px 0; border-radius:var(--mc-radius); overflow:hidden;
  background:linear-gradient(135deg,var(--mc-brand),var(--mc-brand-2)); color:#fff;
  display:flex; align-items:center; gap:22px; padding:24px 28px; box-shadow:var(--mc-shadow);
}
.mc-inline-cta .mc-cta-txt{ flex:1; min-width:0; }
.mc-inline-cta .mc-k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:#8fd0f6; font-weight:700; }
.mc-inline-cta h4{ margin:6px 0 4px; font-size:1.22rem; color:#fff; letter-spacing:-.01em; }
.mc-inline-cta p{ margin:0; color:rgba(255,255,255,.72); font-size:.9rem; }
.mc-btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:12px 22px; border-radius:999px; font-weight:650; font-size:.92rem;
  background:var(--mc-accent); color:#fff !important; border:0; cursor:pointer;
  text-decoration:none !important; box-shadow:0 6px 18px -6px rgba(3,142,220,.7); transition:transform .15s,background .15s;
}
.mc-btn:hover{ background:#0399ee; transform:translateY(-1px); color:#fff !important; }
.mc-btn-block{ display:flex; justify-content:center; width:100%; }
@media (max-width:560px){ .mc-inline-cta{ flex-direction:column; align-items:flex-start; } }

/* ===========================================================
   Author-Box (HitMag template-parts/authorbox.php) reskin
   =========================================================== */
.author-box, .hitmag-author-box, .about-author{
  background:var(--mc-surface) !important; border:1px solid var(--mc-line) !important;
  border-radius:var(--mc-radius) !important; box-shadow:var(--mc-shadow-sm);
  padding:22px !important;
}
.author-box .author-title, .author-box a{ color:var(--mc-accent-ink); }

/* Related posts + post navigation reskin */
.related-posts .related-title, .related-posts h3,
.hitmag-related-posts h3{ text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--mc-ink-mute); }
.post-navigation .nav-links a{ color:var(--mc-accent-ink); }

/* ===========================================================
   SIDEBAR (sidebar.php-Override, mc- Klassen)
   =========================================================== */
#secondary.widget-area{ font-size:1rem; }
.mc-side{ display:flex; flex-direction:column; gap:20px; }
.mc-card{ background:var(--mc-ground); border:1px solid var(--mc-line); border-radius:var(--mc-radius); box-shadow:var(--mc-shadow-sm); overflow:hidden; }
.mc-card-h{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--mc-ink-mute); padding:16px 18px 0; }

.mc-news{ background:linear-gradient(150deg,var(--mc-brand),var(--mc-brand-2)); color:#fff; padding:22px 20px; border-radius:var(--mc-radius); }
.mc-news .mc-k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:#8fd0f6; font-weight:700; }
.mc-news h4{ margin:7px 0 6px; font-size:1.12rem; color:#fff; }
.mc-news p{ margin:0 0 14px; font-size:.85rem; color:rgba(255,255,255,.72); line-height:1.5; }
.mc-news .mc-field{ display:flex; gap:8px; }
.mc-news input{ flex:1; min-width:0; border:0; border-radius:999px; padding:10px 15px; font:inherit; font-size:.85rem; color:var(--mc-ink); }
.mc-news .mc-fine{ margin:10px 0 0; font-size:.68rem; color:rgba(255,255,255,.55); line-height:1.4; }

.mc-tool{ padding:20px 18px; }
.mc-tool .mc-ic{ width:40px; height:40px; border-radius:11px; background:rgba(3,142,220,.12); display:grid; place-items:center; margin-bottom:12px; }
.mc-tool h4{ margin:0 0 5px; font-size:1.02rem; color:var(--mc-ink); }
.mc-tool p{ margin:0 0 14px; font-size:.84rem; color:var(--mc-ink-soft); line-height:1.5; }

.mc-cats{ padding:6px 8px 12px; }
.mc-cats a{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:9px; color:var(--mc-ink); font-size:.9rem; font-weight:500; text-decoration:none; }
.mc-cats a:hover{ background:var(--mc-surface); color:var(--mc-accent-ink); }
.mc-cats .c{ font-size:.74rem; color:var(--mc-ink-mute); background:var(--mc-surface-2); padding:2px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }

.mc-links{ padding:6px 8px 12px; }
.mc-links a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:9px; color:var(--mc-ink); font-size:.9rem; font-weight:500; text-decoration:none; }
.mc-links a:hover{ background:var(--mc-surface); color:var(--mc-accent-ink); }
.mc-links a::after{ content:"\203A"; color:var(--mc-ink-mute); font-size:1.15rem; line-height:1; flex-shrink:0; }
.mc-links a:hover::after{ color:var(--mc-accent); }

.mc-cities{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px 18px; }
.mc-cities a{ font-size:.82rem; font-weight:500; padding:6px 12px; border-radius:999px;
  background:var(--mc-surface); border:1px solid var(--mc-line); color:var(--mc-ink); text-decoration:none; transition:all .15s; }
.mc-cities a:hover{ background:var(--mc-accent); border-color:var(--mc-accent); color:#fff; }

.mc-pop{ padding:8px 18px 18px; }
.mc-pop-item{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--mc-line-soft); }
.mc-pop-item:first-child{ border-top:0; }
.mc-pop-n{ font-size:1.05rem; font-weight:800; color:var(--mc-accent); width:20px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.mc-pop-item a{ font-size:.86rem; font-weight:600; color:var(--mc-ink); line-height:1.35; text-decoration:none; }
.mc-pop-item a:hover{ color:var(--mc-accent-ink); }

/* ===========================================================
   BRAND FOOTER (footer.php-Override)
   =========================================================== */
.mc-foot{ background:var(--mc-brand); color:rgba(255,255,255,.62); }
.mc-foot-in{ max-width:1180px; margin:0 auto; padding:48px 24px 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.mc-foot-brand .mc-logo{ font-size:1.15rem; }
.mc-foot-brand p{ margin:12px 0 0; font-size:.84rem; line-height:1.6; max-width:34ch; }
.mc-foot-col h5{ color:#fff; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; font-weight:700; }
.mc-foot-col a{ display:block; color:rgba(255,255,255,.62); font-size:.86rem; padding:5px 0; text-decoration:none; }
.mc-foot-col a:hover{ color:#fff; }
.mc-foot-bar{ border-top:1px solid rgba(255,255,255,.1); }
.mc-foot-bar-in{ max-width:1180px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; }
.mc-foot-bar-in a{ color:rgba(255,255,255,.62); text-decoration:none; }
@media (max-width:760px){ .mc-foot-in{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:440px){ .mc-foot-in{ grid-template-columns:1fr; } }

/* ===========================================================
   Generierte Kacheln (ersetzen Beitragsbilder)
   =========================================================== */
.mc-tile{
  position:relative; display:grid; place-items:center;
  width:100%; aspect-ratio:16/10; min-height:120px;
  overflow:hidden; color:#fff; border-radius:inherit; line-height:0;
}
.mc-tile::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px);
  background-size:18px 18px; opacity:.5;
}
.mc-tile-ghost{
  position:absolute; right:-3%; bottom:-24%;
  font-size:7rem; font-weight:800; line-height:1; letter-spacing:-.04em;
  color:rgba(255,255,255,.11); user-select:none; pointer-events:none;
}
.mc-tile-ic{
  position:relative; width:16%; min-width:30px; max-width:54px; height:auto; opacity:.96;
}
.mc-tile-badge{
  position:absolute; top:10px; left:10px; z-index:1;
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  padding:4px 9px; border-radius:999px; color:#fff;
}
/* Lange deutsche Komposita umbrechen (sonst laufen Titel in die Nachbarspalte) */
.post-title, .entry-title, .hm-slider-title,
.hmw-grid-post .post-title, .hitmag-one-category .post-title,
.related-posts .post-title, .mc-pop-item a, .mc-cats a, .entry-content h2, .entry-content h3{
  overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}
/* Doppel-Kategorie im Lead-Widget: Kachel-Badge ausblenden (Kategorie wird separat rot gezeigt) */
.hitmag-one-category .mc-tile-badge{ display:none; }

/* Wrapper-<a> um die Kachel als Block darstellen (sonst kollabiert die Breite) */
a:has(> .mc-tile){ display:block; line-height:0; }
.archive-thumb a:has(> .mc-tile){ display:block; }
/* .mc-tile behält display:grid (Icon zentriert) — nie auf block überschreiben! */
/* Slider: Kachel füllt den Slide breit aus */
.hm-slide-image .mc-tile{ aspect-ratio:16/8; min-height:100%; height:100%; }
.hm-slide-image{ overflow:hidden; }

/* Einzelbeitrag: schlankes Brand-Banner statt großer leerer Fläche
   (Titel/Kategorie/Meta stehen ohnehin darüber → Kachel ist Deko) */
.single .image-link .mc-tile,
.single .post-thumbnail .mc-tile,
.single .single-featured-image .mc-tile{
  aspect-ratio:16/5; min-height:170px; border-radius:14px;
}
.single .image-link{ display:block; line-height:0; }
.single .mc-tile-ghost{ font-size:14rem; bottom:-34%; right:1%; }
.single .mc-tile-ic{ width:auto; min-width:54px; max-width:60px; }

/* Abstand zwischen Kachel und Kategorie/Titel in den Magazin-Widgets
   (mein Icon ist kein <img>, daher greift HitMags Bild-Abstand nicht) */
.hmb-post > a{ display:block; margin-bottom:14px; }   /* Lead-Widget */
.hm-grid-thumb{ margin-bottom:12px; }                  /* Grid-Karten */
.hmb-post .cat-links, .hmw-grid-post .cat-links{ display:inline-block; }
/* kleine Sidebar-/Thumbnail-Kacheln kompakter */
.widget .mc-tile, .mc-pop .mc-tile{ aspect-ratio:16/10; min-height:70px; }
.widget .mc-tile-badge{ display:none; }
.widget .mc-tile-ghost{ font-size:4rem; }

/* ===========================================================
   Themen-Kachelreihe (Startseite oben)
   =========================================================== */
.mc-topics-sec{ margin:0 0 34px; }
.mc-topics-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:16px; }
.mc-topics-title{ margin:0; font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--mc-ink); border-bottom:3px solid var(--mc-accent); padding-bottom:6px; }
.mc-topics-all{ font-size:.8rem; font-weight:600; color:var(--mc-accent-ink); white-space:nowrap; }
.mc-topics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .mc-topics{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .mc-topics{ grid-template-columns:1fr; } }
.mc-topic{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:12px; color:#fff !important; text-decoration:none !important;
  box-shadow:var(--mc-shadow-sm); transition:transform .15s, box-shadow .15s; }
.mc-topic:hover{ transform:translateY(-2px); box-shadow:var(--mc-shadow); color:#fff !important; }
.mc-topic::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.4px,transparent 1.4px); background-size:16px 16px; opacity:.55; }
.mc-topic-ic{ position:relative; width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,.15);
  display:grid; place-items:center; flex-shrink:0; }
.mc-topic-ic svg{ width:22px; height:22px; }
.mc-topic-txt{ position:relative; display:flex; flex-direction:column; min-width:0; }
.mc-topic-name{ font-weight:700; font-size:.98rem; letter-spacing:-.01em; overflow-wrap:break-word; }
.mc-topic-count{ font-size:.76rem; color:rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }