/*
Theme Name: MEI-Con
Theme URI: https://mei-con.de/
Author: Benjamin Hubert
Description: Eigenes Theme für MEI-Con Benjamin Hubert. Vier Seiten, keine externen Dienste, keine Cookies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meicon
*/
/* Schriften lokal einbinden — keine externen Anfragen (DSGVO).
   Dateien nach /fonts/ legen. Fehlen sie, greift automatisch der Systemfallback. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/sourceserif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/sourceserif-600.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --ink:#101820;
  --ink-soft:#26323c;
  --paper:#EDF0F2;
  --white:#ffffff;
  --steel:#5A6872;
  --rule:#C3CCD3;
  --rule-soft:#DDE3E7;
  --mark:#B3261E;
  --mark-soft:#F6E6E4;

  --f-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text:"Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap:1140px;
  --gut:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-0.02em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
::selection{background:var(--mark);color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:62ch}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--mark);outline-offset:3px;border-radius:2px;
}

/* ---------- Kopfzeile ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(237,240,242,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;text-decoration:none;white-space:nowrap;line-height:1.15}
.brand{display:block}

.brand-name{display:block}
.brand-name{font-size:1.05rem}
.brand-sub::before{content:"";display:inline-block;width:.9rem;height:1px;background:var(--mark);vertical-align:middle;margin-right:.45rem}
.brand-sub{display:block;font-family:var(--f-display);font-weight:500;font-size:.72rem;color:var(--steel);letter-spacing:.005em;margin-top:.1rem}
@media (max-width:620px){.brand-sub{display:none}}
.nav{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
.nav a{font-family:var(--f-display);font-weight:500;font-size:.9rem;text-decoration:none;color:var(--ink-soft)}
.nav a:hover{color:var(--mark)}
.nav a.btn{color:var(--white)}
.nav a.btn:hover{color:var(--white)}
@media (max-width:820px){.nav a:not(.btn){display:none}}
.lbl-short{display:none}
@media (max-width:520px){.lbl-long{display:none}.lbl-short{display:inline}.top .wrap{gap:.75rem}.btn{padding:.6rem .95rem;font-size:.85rem}}

.btn{
  display:inline-block;font-family:var(--f-display);font-weight:600;font-size:.9rem;
  background:var(--ink);color:var(--white);text-decoration:none;
  padding:.7rem 1.15rem;border:1px solid var(--ink);
}
.btn:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-lg{font-size:1rem;padding:.95rem 1.6rem}

/* ---------- Maßlinie: das durchgehende Motiv ---------- */
.dim{display:flex;align-items:center;gap:.85rem;width:100%}
.dim-line{flex:1;height:1px;background:var(--rule);position:relative}
.dim-line::before,.dim-line::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--rule);
}
.dim-line::before{left:0}.dim-line::after{right:0}
.dim-label{
  font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.01em;
  color:var(--steel);white-space:nowrap;
}
.dim-mark .dim-line,.dim-mark .dim-line::before,.dim-mark .dim-line::after{background:var(--mark)}
.dim-mark .dim-label{color:var(--mark)}

/* ---------- Hero ---------- */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem)}
.hero h1{font-size:clamp(2.1rem,1.15rem + 4.1vw,4.15rem);max-width:19ch}
.hero .lede{font-size:clamp(1.1rem,1.02rem + .38vw,1.32rem);max-width:56ch;color:var(--ink-soft);margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* Zeichnungs-Callout */
.callout{
  margin-top:clamp(2.75rem,6vw,4.25rem);
  border-top:1px solid var(--rule);
  padding-top:1.6rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.callout-dim{grid-column:1 / -1;margin-bottom:1.6rem}
.callout-step{padding-right:1.5rem;position:relative}
.callout-step + .callout-step{padding-left:1.5rem;border-left:1px solid var(--rule-soft)}
.callout-when{
  font-family:var(--f-display);font-weight:600;font-size:.76rem;color:var(--mark);
  display:block;margin-bottom:.4rem;font-variant-numeric:tabular-nums;
}
.callout-what{font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.25;display:block;margin-bottom:.35rem}
.callout-note{font-size:.92rem;color:var(--steel);margin:0;line-height:1.5}
@media (max-width:760px){
  .callout{grid-template-columns:1fr;gap:1.4rem}
  .callout-step{padding-right:0}
  .callout-step + .callout-step{padding-left:0;border-left:0;border-top:1px solid var(--rule-soft);padding-top:1.4rem}
  .callout-dim{margin-bottom:.4rem}
}

/* Ladeanimation der Maßlinie: ein einziger orchestrierter Moment */
.draw .dim-line{transform-origin:left center;animation:draw .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .draw .dim-line{animation:none}
  *{scroll-behavior:auto !important}
}

/* ---------- Abschnitte ---------- */
section{padding:clamp(3.25rem,7vw,5.75rem) 0}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:clamp(1.65rem,1.2rem + 1.9vw,2.6rem);max-width:24ch}
.sec-head p{margin-top:1rem;max-width:62ch;color:var(--ink-soft)}
.sec-rule{margin-bottom:1.5rem}

.dark{background:var(--ink);color:#E4E9ED}
.dark h2,.dark h3{color:#fff}
.dark .dim-line,.dark .dim-line::before,.dark .dim-line::after{background:#3C4954}
.dark .dim-label{color:#93A2AE}
.dark .sec-head p{color:#B6C2CC}
.dark a{color:#fff}

/* Kernthese */
.these{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-0.025em;max-width:20ch}
.these-body{margin-top:1.75rem;max-width:58ch;font-size:1.08rem}

/* Kennzahlen */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.fig{padding:1.5rem 1.5rem 1.5rem 0}
.fig + .fig{padding-left:1.5rem;border-left:1px solid var(--rule-soft)}
.fig b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;margin-bottom:.35rem;
}
.fig span{display:block;font-size:.92rem;color:var(--steel);line-height:1.45}
@media (max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}.fig:nth-child(odd){padding-left:0;border-left:0}.fig:nth-child(n+3){border-top:1px solid var(--rule-soft)}}
@media (max-width:460px){.figs{grid-template-columns:1fr}.fig{padding-left:0;border-left:0}.fig+.fig{border-top:1px solid var(--rule-soft);padding-left:0;border-left:0}}

/* Stufen */
.stages{border-top:1px solid var(--rule)}
.stage{
  display:grid;grid-template-columns:4.5rem 1fr 12rem;gap:2rem;
  padding:1.9rem 0;border-bottom:1px solid var(--rule-soft);align-items:start;
}
.stage-no{
  font-family:var(--f-display);font-weight:700;font-size:2.1rem;letter-spacing:-0.04em;
  color:var(--rule);font-variant-numeric:tabular-nums;line-height:1;
}
.stage.is-key .stage-no{color:var(--mark)}
.stage h3{font-size:1.22rem;margin-bottom:.5rem}
.stage p{margin:0;color:var(--ink-soft);max-width:58ch}
.stage-meta{text-align:right}
.stage-dur{font-family:var(--f-display);font-weight:600;font-size:.84rem;color:var(--ink);display:block;font-variant-numeric:tabular-nums}
.stage-out{font-size:.86rem;color:var(--steel);display:block;margin-top:.3rem;line-height:1.45}
@media (max-width:860px){
  .stage{grid-template-columns:3rem 1fr;gap:1.25rem}
  .stage-meta{grid-column:2;text-align:left;margin-top:.6rem}
  .stage-out{display:inline;margin-left:.5rem}
}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
.card{background:var(--paper);padding:1.75rem}
.dark .cards{background:#2B3742;border-color:#2B3742}
.dark .card{background:var(--ink)}
.card h3{font-size:1.1rem;margin-bottom:.6rem}
.card p{margin:0;font-size:.97rem;color:var(--ink-soft)}
.dark .card p{color:#B6C2CC}
.card-tag{font-family:var(--f-display);font-weight:600;font-size:.74rem;color:var(--mark);display:block;margin-bottom:.55rem}
@media (max-width:880px){.cards{grid-template-columns:1fr}}

/* Preise */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.price{border:1px solid var(--rule);padding:1.85rem;background:var(--white);display:flex;flex-direction:column}
.price.is-lead{background:var(--ink);color:#E4E9ED;border-color:var(--ink)}
.price.is-lead h3{color:#fff}
.price h3{font-size:1.05rem;margin-bottom:1rem}
.price .amount{font-family:var(--f-display);font-weight:700;font-size:1.9rem;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.price .unit{font-size:.85rem;color:var(--steel);display:block;margin-top:.3rem}
.price.is-lead .unit{color:#93A2AE}
.price ul{list-style:none;padding:0;margin:1.4rem 0 0;font-size:.94rem}
.price li{padding-left:1.1rem;position:relative;margin-bottom:.5rem;line-height:1.5}
.price li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--mark)}
@media (max-width:880px){.prices{grid-template-columns:1fr}}

/* Zielgruppe */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)}
.fit-col{padding:1.85rem}
.fit-col + .fit-col{border-left:1px solid var(--rule)}
.fit-col h3{font-size:1.05rem;margin-bottom:1rem}
.fit-col ul{list-style:none;padding:0;margin:0;font-size:.97rem}
.fit-col li{padding-left:1.35rem;position:relative;margin-bottom:.65rem;line-height:1.5}
.fit-yes li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:1px;background:var(--mark)}
.fit-no li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:1px;background:var(--rule)}
.fit-no li{color:var(--steel)}
@media (max-width:760px){.fit{grid-template-columns:1fr}.fit-col + .fit-col{border-left:0;border-top:1px solid var(--rule)}}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule-soft)}
summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.35;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.5rem;top:1.55rem;width:.8rem;height:1px;background:var(--ink);
}
summary::before{
  content:"";position:absolute;right:.9rem;top:1.15rem;width:1px;height:.8rem;background:var(--ink);
  transition:opacity .18s ease;
}
details[open] summary::before{opacity:0}
details .answer{padding:0 0 1.35rem;max-width:64ch;color:var(--ink-soft)}

/* Über */
.about{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.about-facts{border-top:1px solid var(--rule)}
.about-facts div{padding:1rem 0;border-bottom:1px solid var(--rule-soft)}
.about-facts dt{font-family:var(--f-display);font-weight:600;font-size:.8rem;color:var(--mark);margin-bottom:.2rem}
.about-facts dd{margin:0;font-size:.97rem}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
label{display:block;font-family:var(--f-display);font-weight:600;font-size:.82rem;margin-bottom:.35rem}
input,textarea{
  width:100%;font-family:var(--f-text);font-size:1rem;padding:.7rem .85rem;
  border:1px solid #43505B;background:#1A242D;color:#fff;border-radius:0;
}
input::placeholder,textarea::placeholder{color:#7D8C98}
.field{margin-bottom:1.1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:#B6C2CC;margin-bottom:1.3rem}
.consent input{width:auto;margin-top:.25rem;flex:none}
.contact .btn{background:var(--mark);border-color:var(--mark);color:#fff}
.contact .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.direct dt{font-family:var(--f-display);font-weight:600;font-size:.8rem;color:#93A2AE;margin-bottom:.2rem}
.direct dd{margin:0 0 1.15rem;font-size:1.02rem}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* Fuß */
footer{background:var(--ink);color:#93A2AE;border-top:1px solid #2B3742;padding:2.25rem 0;font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer a{color:#C8D2DA;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .spacer{margin-left:auto}

.note{font-size:.84rem;color:var(--steel);margin-top:1.25rem}
.dark .note{color:#8C9AA6}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--ink);color:#fff;padding:.7rem 1rem}

/* ---------- Startseite: Leistungsfelder ---------- */
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.field-card{background:var(--white);padding:1.9rem 1.75rem 1.6rem;display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.field-card:hover{background:var(--paper)}
.field-no{font-family:var(--f-display);font-weight:700;font-size:.78rem;color:var(--mark);margin-bottom:.9rem;display:block}
.field-card h3{font-size:1.18rem;line-height:1.22;margin-bottom:.7rem}
.field-card p{font-size:.97rem;color:var(--ink-soft);margin:0 0 1.2rem}
.field-more{margin-top:auto;font-family:var(--f-display);font-weight:600;font-size:.86rem;color:var(--mark)}
.field-more::after{content:" →"}
.field-card.is-plain .field-more{color:var(--steel)}
.field-card.is-plain .field-more::after{content:""}
@media (max-width:900px){.fields{grid-template-columns:1fr}}

.home-hero{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem)}
.home-hero h1{font-size:clamp(2rem,1.15rem + 3.6vw,3.6rem);max-width:20ch}
.home-hero .lede{font-size:clamp(1.08rem,1rem + .35vw,1.28rem);max-width:58ch;color:var(--ink-soft);margin-top:1.4rem}

/* ---------- Kontaktformular ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field .opt{font-weight:400;color:#93A2AE;font-size:.78rem}
.consent label{font-family:var(--f-text);font-weight:400;font-size:.86rem;margin:0;line-height:1.5}
.form-hinweis{
  border-left:3px solid var(--mark);padding:1.1rem 1.25rem;margin-bottom:1.5rem;
  background:rgba(255,255,255,.06);font-size:.98rem;line-height:1.55;
}
.form-ok{border-left-color:#3FA66B}
.kontaktformular button{margin-top:.25rem}

/* ---------- Sprachumschalter ---------- */
.lang{font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;margin-left:.35rem}
.lang a{color:var(--steel);text-decoration:none;padding:.15rem .1rem}
.lang a.is-on{color:var(--ink)}
.lang a:hover{color:var(--mark)}
.lang-sep{color:var(--rule);margin:0 .3rem}
@media (max-width:520px){.lang{margin-left:0}}

/* Verlinkte Karten-Überschrift nicht unterstreichen */
.field-card h3 a{text-decoration:none;color:inherit}
.field-card h3 a:hover{color:var(--mark)}
a.field-more{text-decoration:none}