/* ============================================================================
   /mkurti/ — Marke als Fläche
   Ruhig gesetzt: das MK-Zeichen als Wasserzeichen, ein kurzer Hinweis zu dem,
   was für HeizHirsch entstanden ist, und darunter das Angebot in Boxen.
   Schriftgewichte bewusst zurückhaltend — nichts über 700.
   ========================================================================== */

.mkd{
  --mkd-bg:#151A19;
  --mkd-flaeche:#1B211F;
  --mkd-linie:#2A322F;
  --mkd-linie-2:#39433F;
  --mkd-mint:#C4E3DD;
  --mkd-ink:#E7EEEB;
  --mkd-text:rgba(255,255,255,.62);
  --mkd-leise:rgba(255,255,255,.4);

  position:relative;
  background:var(--mkd-bg); color:var(--mkd-ink);
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  font-family:"Inter Tight", sans-serif;
}
/* Links laeuft der Inhalt, rechts bleibt die Marke stehen. */
.mkd-links{ padding:clamp(32px,4.5vw,76px) clamp(20px,3.4vw,60px); min-width:0; }
.mkd-rechts{
  position:sticky; top:var(--kopf-h, 60px);
  height:calc(100vh - var(--kopf-h, 60px));
  display:flex; flex-direction:column; justify-content:center; gap:26px;
  padding:clamp(28px,3.4vw,60px);
  border-left:1px solid var(--mkd-linie); overflow:hidden;
  background:#121716;
}
@media (max-width:900px){
  .mkd{ grid-template-columns:1fr; }
  .mkd-rechts{ position:static; height:auto; border-left:0;
    border-bottom:1px solid var(--mkd-linie); order:-1; padding:clamp(28px,6vw,44px); }
  .mkd-links{ padding:clamp(28px,6vw,44px) clamp(20px,5vw,32px); }
}
.mkd *{ box-sizing:border-box; }

/* ─────────────── Wasserzeichen ─────────────── */
.mkd-wasser{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(86%, 520px); height:auto; fill:rgba(196,227,221,.06);
  pointer-events:none; z-index:0;
}

.mkd-in{ position:relative; z-index:1; }
.mkd-kopf{ max-width:46ch; }

.mkd-logo{ width:36px; height:45px; fill:var(--mkd-mint); display:block; }
.mkd-kick{
  margin:20px 0 10px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mkd-mint); font-weight:600;
}
.mkd h1{
  margin:0; font-family:"Nunito Sans", sans-serif;
  font-size:clamp(26px,3.8vw,44px); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.18;
  color:var(--mkd-ink);
}
.mkd-tag{
  margin:14px 0 0; font-size:clamp(15px,1.5vw,17.5px); line-height:1.7;
  color:var(--mkd-text); max-width:52ch;
}
.mkd-tag b{ color:var(--mkd-ink); font-weight:550; }

/* ─────────────── Abschnittsmarke ─────────────── */
.mkd-trenn{
  display:flex; align-items:center; gap:16px;
  margin:clamp(30px,4vw,52px) 0 clamp(16px,2vw,24px);
  font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mkd-leise); font-weight:600;
}
.mkd-trenn .ln{ flex:1; height:1px; background:var(--mkd-linie); }
.mkd-trenn .re{ color:var(--mkd-mint); }

/* ─────────────── Kurzer Hinweis zu HeizHirsch ─────────────── */
.mkd-notiz{
  max-width:62ch; font-size:clamp(14.5px,1.4vw,16.5px); line-height:1.75; color:var(--mkd-text);
}
.mkd-notiz b{ color:var(--mkd-ink); font-weight:550; }
.mkd-notiz + .mkd-notiz{ margin-top:12px; }

/* ─────────────── Leistungen als Boxen ─────────────── */
.mkd-boxen{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.mkd-box{
  display:flex; flex-direction:column; gap:9px;
  background:var(--mkd-flaeche); border:1px solid var(--mkd-linie);
  padding:clamp(17px,1.8vw,24px);
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.mkd-box:hover{ border-color:var(--mkd-mint); background:#1F2624; transform:translateY(-2px); }
.mkd-box:focus-visible{ outline:2px solid var(--mkd-mint); outline-offset:2px; }

.mkd-box-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mkd-box-ic{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  background:rgba(196,227,221,.1); border:1px solid rgba(196,227,221,.2);
}
.mkd-box-ic svg{ width:17px; height:17px; stroke:var(--mkd-mint); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mkd-box-idx{
  font-family:ui-monospace,Consolas,monospace; font-size:10.5px;
  letter-spacing:.14em; color:var(--mkd-leise); padding-top:4px;
}
.mkd-box h2{
  margin:0; font-family:"Nunito Sans", sans-serif;
  font-size:14.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; line-height:1.35; color:var(--mkd-ink);
}
.mkd-box p{ margin:0; font-size:14px; line-height:1.6; color:var(--mkd-text); }
.mkd-box-fuss{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--mkd-linie);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:ui-monospace,Consolas,monospace; font-size:11px; letter-spacing:.08em;
}
.mkd-box-preis{ color:var(--mkd-mint); font-weight:600; }
.mkd-box-preis.leise{ color:var(--mkd-leise); font-weight:500; }
.mkd-box-pfeil{ display:inline-flex; color:var(--mkd-leise); transition:color .18s ease, transform .18s ease; }
.mkd-box:hover .mkd-box-pfeil{ color:var(--mkd-mint); transform:translateX(2px); }
.mkd-box-pfeil svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─────────────── Konditionen ─────────────── */
.mkd-kond{
  margin:clamp(16px,2vw,24px) 0 0; padding:15px 18px;
  border-left:2px solid var(--mkd-mint); background:rgba(196,227,221,.05);
  font-size:14.5px; line-height:1.7; color:var(--mkd-text); max-width:70ch;
}
.mkd-kond b{ color:var(--mkd-ink); font-weight:550; }

/* ─────────────── Eckdaten und Abschluss ─────────────── */
/* Untereinander statt in Kolonnen — zwei Spalten brachen unschön um.
   Beschriftung links, Wert rechts; auf schmalen Schirmen gestapelt. */
.mkd-fakten{
  display:flex; flex-direction:column;
  margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(6px,1vw,10px);
  border-top:1px solid var(--mkd-linie);
}
.mkd-fakten > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--mkd-linie);
}
.mkd-fakten > div:last-child{ border-bottom:0; }
.mkd-fk{
  margin:0; flex:none; font-family:ui-monospace,Consolas,monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mkd-leise); font-weight:600;
}
.mkd-fv{ margin:0; font-size:15px; font-weight:550; color:var(--mkd-ink); text-align:right; }
@media (max-width:520px){
  .mkd-fakten > div{ flex-direction:column; align-items:flex-start; gap:5px; }
  .mkd-fv{ text-align:left; }
}
.mkd-fv .punkt{ color:var(--mkd-mint); }

.mkd-fuss{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);
}
.mkd-cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--mkd-mint); color:#0E1211; padding:14px 22px;
  font-family:"Nunito Sans", sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  transition:background-color .18s ease;
}
.mkd-cta:hover{ background:#FFF; }
.mkd-cta:focus-visible{ outline:2px solid var(--mkd-mint); outline-offset:3px; }
.mkd-cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mkd-sig{
  font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mkd-leise);
}


/* ─────────────── Rechte Hälfte: Marke und Kontakt ─────────────── */
.mkd-marke{ position:relative; z-index:1; display:flex; flex-direction:column; gap:16px; }
.mkd-marke .mkd-logo{ width:52px; height:65px; }
.mkd-marke-name{
  margin:0; font-family:"Nunito Sans", sans-serif; font-size:clamp(20px,2vw,26px);
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; line-height:1.25; color:var(--mkd-ink);
}
.mkd-marke-satz{
  margin:0; font-size:15px; line-height:1.7; color:var(--mkd-text); max-width:34ch;
}
.mkd-kontakt{
  position:relative; z-index:1; display:flex; flex-direction:column;
  border-top:1px solid var(--mkd-linie);
}
.mkd-kontakt a, .mkd-kontakt span.zeile{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--mkd-linie);
  text-decoration:none; color:var(--mkd-ink); font-size:14.5px;
  transition:color .16s ease;
}
/* Adresse und der Hinweis zum Zuercher Oberland laufen ueber zwei Zeilen —
   der Wert bleibt rechtsbuendig, damit die Spalte ruhig bleibt. */
.mkd-kontakt a > span + span,
.mkd-kontakt span.zeile > span + span{ text-align:right; line-height:1.55; }
.mkd-kontakt a:hover{ color:var(--mkd-mint); }
.mkd-kontakt a:focus-visible{ outline:2px solid var(--mkd-mint); outline-offset:2px; }
.mkd-kontakt .kl{
  font-family:ui-monospace,Consolas,monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mkd-leise); font-weight:600; flex:none;
}
.mkd-soz{ display:flex; gap:8px; padding-top:16px; position:relative; z-index:1; }
.mkd-soz a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--mkd-linie); transition:border-color .16s ease, background-color .16s ease;
}
.mkd-soz a:hover{ border-color:var(--mkd-mint); background:rgba(196,227,221,.08); }
.mkd-soz a:focus-visible{ outline:2px solid var(--mkd-mint); outline-offset:2px; }
.mkd-soz svg{ width:16px; height:16px; fill:var(--mkd-text); }
.mkd-soz a:hover svg{ fill:var(--mkd-mint); }

/* ─────────────── Kurze Bildschirme ───────────────
   Mit Adresse und dem Hinweis zum Zuercher Oberland ist die rechte Spalte
   zwei Zeilen laenger geworden. Auf flachen Schirmen (Notebook, 720px hoch)
   ruecken Abstaende und Zeichen zusammen, damit der Knopf unten sichtbar
   bleibt; reicht das nicht, laesst sich die Spalte fuer sich scrollen. */
@media (min-width:901px){
  .mkd-rechts{ overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
  .mkd-rechts::-webkit-scrollbar{ width:0; height:0; }
}
@media (min-width:901px) and (max-height:840px){
  .mkd-rechts{ gap:16px; padding:clamp(20px,2.4vw,34px); }
  .mkd-marke{ gap:12px; }
  .mkd-marke .mkd-logo{ width:44px; height:55px; }
  .mkd-kontakt a, .mkd-kontakt span.zeile{ padding:9px 0; }
  .mkd-soz{ padding-top:10px; }
}

/* ─────────────── Rechtszeile ───────────────
   Diese Seite traegt keinen Fussbereich. Impressum und Datenschutz muessen
   trotzdem von hier aus erreichbar bleiben — leise, unter den Eckdaten. */
.mkd-recht{
  display:flex; flex-wrap:wrap; gap:18px;
  margin:clamp(22px,2.6vw,32px) 0 0; padding-top:16px;
  border-top:1px solid var(--mkd-linie);
  font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}
.mkd-recht a{ color:var(--mkd-leise); text-decoration:none; transition:color .16s ease; }
.mkd-recht a:hover{ color:var(--mkd-mint); }
.mkd-recht a:focus-visible{ outline:2px solid var(--mkd-mint); outline-offset:2px; }