/*
Theme Name: Mauer IT Consulting
Description: Firmen-Theme der Mauer IT Consulting GmbH. Arial, sechs Akzentfarben, keine externen Ressourcen, kein JavaScript.
Author: Mauer IT Consulting GmbH
Version: 1.2.0
License: proprietary
*/

/* ── Design tokens ─────────────────────────────────────────────────────────
   The six M colors are sampled by eye from kom.png:
   M1 dark blue, M2 red, M3 green, M4 orange, M5 light blue, M6 yellow.
   Grey #8c8c8c matches the M⁶ wordmark. */
:root{
  --m1:#17509e;
  --m2:#e2231a;
  --m3:#169b4e;
  --m4:#f26f21;
  --m5:#4ba2e8;
  --m6:#f5b301;
  --m1-dk:#123f7e;
  --hexline:linear-gradient(90deg,
    var(--m1) 0 16.66%, var(--m2) 16.66% 33.33%, var(--m3) 33.33% 50%,
    var(--m4) 50% 66.66%, var(--m5) 66.66% 83.33%, var(--m6) 83.33% 100%);
  --ink:#111111; --body:#3a3a3a; --mut:#626262; --soft:#8c8c8c;
  --bg:#ffffff; --bg-alt:#f8f9fa; --line:#e6e8ec;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:16px/1.65 Arial,Helvetica,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--m1);text-decoration:none}
a:hover{color:var(--m1-dk);text-decoration:underline}

/* Original headings are regular weight, black on white — not bold-heavy. */
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .45em;font-weight:400}
h1{font-size:2.4rem}
h2{font-size:1.7rem}
h3{font-size:1.2rem}
h4{font-size:1rem;color:var(--mut)}
h5{
  font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 .5em;
  letter-spacing:.05em;text-transform:uppercase;
}
/* The one h5 on the site is the Partner formula line — give it the
   six-color hexagon signature underline. */
.mc-section h5::after{
  content:"";display:block;width:138px;height:5px;
  margin:.75rem auto 0;background:var(--hexline);
}
.mc-section:not(.center) h5::after{margin-left:0}
p{margin:0 0 1em}
strong{color:var(--ink)}

/* ── Header: white, m6 wordmark left, plain bold black nav ───────────────── */
.site-head{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  max-width:var(--wrap);margin:0 auto;padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  font-size:1rem;font-weight:700;color:var(--ink);line-height:1.2;
}
/* The grey M-six wordmark as the logo mark (CSS-only, no PHP change needed). */
.brand::before{
  content:"";flex:none;width:58px;height:30px;
  background:url(/assets/media/2021/01/m6.png) left center/contain no-repeat;
}
.brand span{
  display:block;font-size:.7rem;font-weight:400;color:var(--soft);
  letter-spacing:.08em;text-transform:uppercase;margin-top:.1rem;
}
.brand:hover{text-decoration:none;color:var(--ink)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{
  color:var(--ink);font-weight:700;font-size:.95rem;padding:.35rem 0;
  border-bottom:2px solid transparent;display:inline-block;
}
.site-nav a:hover{color:var(--m1);text-decoration:none;border-bottom-color:var(--m1)}
.site-nav .current-menu-item>a,.site-nav .current_page_item>a{
  color:var(--m1);border-bottom-color:var(--m1);
}

/* ── Sections: tight vertical rhythm, centered container ─────────────────── */
.mc-section{padding:2.5rem 1.5rem}
.mc-section>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.mc-section.center{text-align:center}
.mc-section.alt{background:var(--bg-alt)}
.mc-lead{font-size:1.05rem;color:var(--mut);max-width:52rem;margin:0 auto 1.2rem}
.mc-section:not(.center) .mc-lead{margin-left:0}
.mc-sub{color:var(--soft);font-size:1rem;margin:-.2rem 0 1rem}

/* Small hexagon section marker above centered headings (per-section color
   via .mk-m1 .. .mk-m6 on the section, defaults to M1 blue). */
.mk-m1{--mk:var(--m1)} .mk-m2{--mk:var(--m2)} .mk-m3{--mk:var(--m3)}
.mk-m4{--mk:var(--m4)} .mk-m5{--mk:var(--m5)} .mk-m6{--mk:var(--m6)}
.mc-section.center h2::before{
  content:"";display:block;width:15px;height:17px;margin:0 auto .6rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--mk,var(--m1));
}

/* ── Hero: two columns on the soft circle background (hb-1.png) ──────────── */
.mc-section.hero{
  background:#fff url(/assets/media/2021/01/hb-1.png) center right/cover no-repeat;
  border-bottom:1px solid var(--line);
  padding:2.75rem 1.5rem;
}
.hero h1{font-size:2.5rem;font-weight:300;margin-bottom:.15em}
.hero .lede{
  font-size:1.2rem;color:var(--mut);margin-bottom:1.3rem;letter-spacing:.02em;
}
/* Left: copy + M list (~42%). Right: the kom.png infographic (~58%),
   landscape 1207x516, vertically centered — the brand leads from pixel one. */
.mc-hero-grid{
  display:grid;grid-template-columns:.42fr .58fr;align-items:center;
  gap:2.5rem;max-width:var(--wrap);margin:0 auto;
}
.mc-hero-visual img{width:100%;margin:0 auto}
/* Compact M1-M6 list, each prefix in its hexagon color. */
.mc-mlist{list-style:none;margin:0;padding:0;font-size:.98rem;color:var(--body)}
.mc-mlist li{padding:.22rem 0}
.mc-mlist b{
  display:inline-block;min-width:2.1rem;font-weight:700;color:var(--mc,var(--m1));
}
.m1{--mc:var(--m1)} .m2{--mc:var(--m2)} .m3{--mc:var(--m3)}
.m4{--mc:var(--m4)} .m5{--mc:var(--m5)} .m6{--mc:var(--m6)}

/* Plain centered hero for the subpages. */
.mc-section.hero.center{text-align:center}
.mc-section.hero.center h1{font-size:2.1rem}

/* ── Bordered figure card ──────────────────────────────────────────────── */
figure.mc-photo-box{
  margin:0 auto;max-width:1000px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:1.2rem;
}
figure.mc-photo-box img{margin:0 auto}
figure.mc-photo-box figcaption{
  text-align:center;color:var(--soft);font-size:.9rem;margin-top:.7rem;
}
/* ── M⁶ wordmark strip: wordmark left, Leistungen paragraph right ────────── */
.mc-band{
  display:flex;align-items:center;gap:2.5rem;
  max-width:var(--wrap);margin:0 auto;
}
.mc-band .mc-m6{width:170px;flex:none;margin:0}
.mc-band .mc-lead{margin:0;text-align:left}

/* ── M1-M6 zigzag rows: icon centered, text alternating sides, no boxes ──── */
.mc-zig{max-width:1000px;margin:1.6rem auto 0}
.mc-zrow{
  display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;
  gap:1.8rem;padding:1.2rem 0;
}
.mc-zrow+.mc-zrow{border-top:1px solid var(--line)}
.mc-zrow .zicon{grid-column:2;grid-row:1;width:140px;margin:0 auto}
.mc-zrow .ztext{grid-column:1;grid-row:1;text-align:right}
.mc-zrow:nth-child(even) .ztext{grid-column:3;text-align:left}
.znum{
  display:block;font-size:2.9rem;font-weight:300;line-height:1.05;
  color:var(--mc,var(--m1));letter-spacing:.01em;
}
.mc-zrow h3{font-size:1.22rem;font-weight:400;margin:.15rem 0 .3rem}
.mc-zrow p{font-size:.88rem;font-weight:700;color:var(--mut);margin:0}

/* ── Hexagon chip badge (used where a compact M marker is needed) ────────── */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.7rem;flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--mc,var(--m1));color:#fff;font-weight:700;font-size:.78rem;
}

/* Generic card grid. */
.mc-grid{
  display:grid;gap:1.4rem;margin-top:1.8rem;
  grid-template-columns:repeat(3,1fr);
}
.mc-card{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--mc,var(--m1));
  border-radius:6px;padding:1.4rem 1.2rem;text-align:center;
}
.mc-card img{width:72px;height:auto;margin:0 auto 1rem}
.mc-card .tag{margin-bottom:.7rem}
.mc-card h3{font-size:1.05rem;margin-bottom:.45rem}
.mc-card p{font-size:.92rem;color:var(--mut);margin:0}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mc-btn{
  display:inline-block;background:var(--m1);color:#fff;font-weight:700;
  padding:.6rem 1.5rem;border-radius:4px;
}
.mc-btn:hover{background:var(--m1-dk);color:#fff;text-decoration:none}

/* ── Contact ─────────────────────────────────────────────────────────────── */
address.mc-contact{
  font-style:normal;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--m1);border-radius:6px;
  padding:1.3rem 1.6rem;display:inline-block;text-align:left;color:var(--mut);
}
address.mc-contact strong{display:block;color:var(--ink);margin-bottom:.3rem}
.mc-map{margin-top:1.8rem;max-width:1000px}
.mc-map iframe{
  width:100%;height:400px;border:1px solid var(--line);border-radius:6px;display:block;
}

/* Platzhalter für noch fehlende Medien. */
.mc-missing{
  border:1px dashed var(--soft);color:var(--soft);background:var(--bg-alt);
  padding:1.4rem;border-radius:6px;text-align:center;font-size:.88rem;
}

/* Copy never finished on the ORIGINAL site — marked, not hidden.
   Tinted with the M6 hexagon yellow. */
.mc-draft{
  border-left:4px solid var(--m6);background:#fff8e1;color:#6b5700;
  padding:.9rem 1.2rem;border-radius:0 6px 6px 0;font-size:.9rem;
  max-width:52rem;text-align:left;
}

/* ── Footer: dark, six-color signature line on its top edge ──────────────── */
.site-foot{
  position:relative;background:#20252c;color:#b9bec6;
  padding:2.2rem 1.5rem;font-size:.9rem;
}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--hexline);
}
.site-foot .wrap{
  max-width:var(--wrap);margin:0 auto;display:flex;
  gap:2.2rem;flex-wrap:wrap;justify-content:space-between;
}
.site-foot strong{color:#fff;display:block;margin-bottom:.35rem;font-weight:700}
.site-foot a{color:var(--m5)}
.site-foot a:hover{color:#7fc0f2}
.site-foot .legal{color:#848b95;font-size:.82rem}

/* ── Responsive: single column under 760px ───────────────────────────────── */
@media (max-width:980px){
  .mc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .site-head .wrap{padding:.6rem 1rem}
  .site-nav{margin-left:0;width:100%}
  .site-nav ul{gap:1rem}
  .site-nav a{font-size:.88rem}
  .mc-section{padding:1.9rem 1rem}
  .mc-section.hero{padding:2.1rem 1rem}
  h1,.hero h1{font-size:1.7rem}
  h2{font-size:1.35rem}
  .mc-hero-grid{grid-template-columns:1fr;gap:1.6rem;text-align:center}
  .mc-mlist b{min-width:0;margin-right:.4rem}
  .mc-band{flex-direction:column;gap:1.2rem;text-align:center}
  .mc-band .mc-lead{text-align:center}
  .mc-band .mc-m6{width:130px}
  .mc-zrow{grid-template-columns:1fr;gap:.8rem;text-align:center;padding:1.4rem 0}
  .mc-zrow .zicon{grid-column:1;grid-row:1;width:110px}
  .mc-zrow .ztext,.mc-zrow:nth-child(even) .ztext{
    grid-column:1;grid-row:2;text-align:center;
  }
  .znum{font-size:2.2rem}
  .mc-grid{grid-template-columns:1fr}
  figure.mc-photo-box{padding:.8rem}
  .mc-map iframe{height:320px}
}

/* ── Legal prose (Impressum / Datenschutz on the Kontakt page) ──────────── */
.mc-legal{text-align:left}
.mc-legal>*{max-width:52rem;margin-left:auto;margin-right:auto}
.mc-legal h2{margin-top:.2rem}
.mc-legal h3{margin-top:1.6rem}
.mc-legal h4{margin-top:1.4rem;font-weight:700;color:var(--fg-str,#1d1d1d)}
.mc-legal h5{margin-top:1rem;color:var(--fg-str,#1d1d1d);text-transform:none;letter-spacing:0}
.mc-legal p{font-size:.92rem;color:var(--mut,#626262);line-height:1.75}
.mc-legal a{word-break:break-all}
/* Deep-linked from the nav — keep the heading clear of the sticky header. */
#impressum,#datenschutz{scroll-margin-top:5.5rem}

/* ── Kontakt: address left, map right ───────────────────────────────────── */
.mc-contact-grid{
  display:grid;grid-template-columns:minmax(280px,1fr) 2fr;
  gap:2rem;align-items:start;text-align:left;
}
.mc-contact-grid .mc-contact{display:block;width:100%}
.mc-contact-grid .mc-map{margin-top:0}
.mc-contact-grid .mc-map iframe{width:100%;height:420px}
.mc-contact-grid .mc-sub{margin-top:.6rem}
@media (max-width:860px){
  .mc-contact-grid{grid-template-columns:1fr}
}

/* ── Wordmark ──────────────────────────────────────────────────────────────
   The logo image carries the full company name and tagline, so the brand text
   is visually hidden (screen readers still get it). */
.brand::before{
  background-image:url(/assets/media/2019/11/Mauer-IT-Consulting-Front-logo-trimmed.png);
  width:240px;height:38px;
}
.brand .brand-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;   /* screen readers only */
}
.brand span{display:none}
@media (max-width:560px){ .brand::before{width:180px;height:29px} }