/* Managed Website neu (Duplikat /managed-website/neu/) nach Philipps finalem Text im Google Doc „Managed Website - Unterseitenstruktur“
   (25.10.2026). Ergänzt leistung.css, nutzt deren Variablen. */

/* Preiskarte: Name und Umschalter jährlich/monatlich in einer Zeile */
.mwn-preis__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mwn-umschalter{display:inline-flex;padding:4px;border-radius:999px;background:var(--g50);border:1px solid var(--line)}
.mwn-umschalter button{padding:7px 13px;border:0;border-radius:999px;background:transparent;font:600 12px/1 var(--sans);letter-spacing:.02em;color:var(--text-2);cursor:pointer}
.mwn-umschalter button[aria-pressed="true"]{background:var(--black);color:#fff}
.mwn-umschalter button:focus-visible{outline:2px solid var(--black);outline-offset:2px}
/* „im Monat“ rechts neben dem Preis (Philipp 25.10.2026) */
.mwn-preis__betrag{flex-direction:row;align-items:baseline;gap:12px}
.mwn-preis__betrag strong{margin-top:0}

/* Bestandteile: Report-Bildwelt in der schmalen Karte ohne dritte Kennzahl, sonst abgeschnitten */
#inklusive .vig__kpis>div:nth-child(3){display:none}

/* Listen mit Haken oder Kreuz (Vorher/Nachher) */
.mwn-vergleich{max-width:1100px;margin:0 auto}
.mwn-liste{list-style:none;margin:16px 0 0;padding:0;display:grid}
.mwn-liste li{position:relative;padding:12px 0 12px 36px;border-bottom:1px solid var(--line);font:400 15.5px/1.5 var(--sans);color:var(--petrol)}
.mwn-liste li:last-child{border-bottom:0}
.mwn-liste li::before{content:"✓";position:absolute;left:0;top:12px;width:24px;height:24px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--sans)}
.mwn-liste--ohne li{color:var(--text-2)}
.mwn-liste--ohne li::before{content:"×";background:#fff;color:var(--text-2);border:1px solid var(--g300);font:400 16px/1 var(--sans)}
.mwn-klein{margin-top:18px;font:400 13.5px/1.5 var(--sans);color:var(--text-2)}

/* Erstellung: 0 ohne Schrägstrich (DM Mono zeichnet die 0 durchgestrichen, liest sich wie „Ø“) */
#erstellung .why__badge strong{font-family:var(--sans);font-weight:300}

/* Ablauf und Laufzeit in einer Sektion */
.mwn-mitte{justify-content:center;text-align:center;margin-top:32px}
.mwn-block{margin-top:120px}
@media (max-width:680px){.mwn-block{margin-top:72px}}

/* Projektpreis vs. Managed Website: Merkmal klein über dem Wert */
.mwn-werte{margin:16px 0 0;display:grid}
.mwn-werte>div{padding:12px 0;border-bottom:1px solid var(--line)}
.mwn-werte>div:last-child{border-bottom:0}
.mwn-werte dt{font:600 10.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.mwn-werte dd{margin:4px 0 0;font:400 15.5px/1.45 var(--sans);color:var(--petrol)}
.card--hl .mwn-werte dd{font-weight:500}

/* Rechner „Ab wann rechnet sich Ihre Website?“ (Regler wie auf website-zentrale.de, im Stil von bueroblanko.de) */
.mwn-rechner{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:center;max-width:1100px;margin:120px auto 0}
.mwn-rechner .h2{margin-top:16px}
.mwn-rechner .lead{margin-top:18px}
.mwn-rechner__label{display:block;margin-top:32px;font:600 15px/1.3 var(--sans);color:var(--black)}
.mwn-rechner__eingabe{display:flex;align-items:center;gap:20px;margin-top:14px}
.mwn-rechner__eingabe input{flex:1;min-width:0;height:6px;accent-color:var(--black);cursor:pointer}
.mwn-rechner__eingabe output{min-width:110px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font:500 20px/1 var(--mono);color:var(--black);text-align:center}
.mwn-rechner__hinweis{margin-top:18px;font:400 13px/1.5 var(--sans);color:var(--text-2)}
.mwn-rechner__ergebnis{padding:34px;border-radius:var(--radius);background:var(--black);color:#fff;box-shadow:var(--shadow)}
.mwn-rechner__klein{display:block;font:500 14px/1.3 var(--sans);color:var(--on-dark-2)}
.mwn-rechner__zahl{display:block;margin-top:10px;font:300 88px/1 var(--sans);letter-spacing:-.04em;color:var(--mint)}
.mwn-rechner__einheit{display:block;margin-top:4px;font:600 20px/1.3 var(--sans)}
.mwn-rechner__satz{margin-top:16px;font:400 15px/1.5 var(--sans);color:var(--on-dark-2)}
.mwn-rechner__balken{margin-top:22px;height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.mwn-rechner__balken span{display:block;height:100%;border-radius:999px;background:var(--mint);transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.mwn-rechner__balken span{transition:none}}
@media (max-width:1180px){.mwn-rechner{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:680px){.mwn-rechner{margin-top:72px}.mwn-rechner__ergebnis{padding:26px}.mwn-rechner__zahl{font-size:72px}}

/* Projektpreis vs. Managed Website als Tabelle (Philipp 25.10.2026, Screenshot der Tabellenfassung); auf dem Handy je Zeile
   Merkmal oben, darunter beide Werte nebeneinander */
.mwn-tabelle-wrap{max-width:1100px;margin:0 auto}
.mwn-tabelle tbody th{white-space:nowrap}
@media (max-width:680px){
  table.t.mwn-tabelle,.mwn-tabelle tbody{display:block;width:100%;min-width:0}
  .mwn-tabelle thead{display:none}
  .mwn-tabelle tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .mwn-tabelle tbody th{grid-column:1/-1;padding:14px 16px 4px;border-bottom:0;white-space:normal}
  .mwn-tabelle td{padding:6px 16px 14px;border-bottom:0;font-size:14px}
  .mwn-tabelle td::before{content:attr(data-label);display:block;margin-bottom:4px;font:600 10px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
}

/* Rechner so niedrig wie möglich (Philipp 26.10.2026: „Höhe dieser Sektion so gering wie möglich“): kleinere Überschrift,
   knappe Abstände, Ergebnis quer mit der Zahl links */
.mwn-rechner{margin-top:72px;gap:48px}
.mwn-rechner .mwn-rechner__titel{margin-top:10px;font:400 clamp(24px,2.2vw,32px)/1.15 var(--sans);letter-spacing:-.01em}
.mwn-rechner__label{margin-top:18px}
.mwn-rechner__eingabe{margin-top:10px}
.mwn-rechner__eingabe output{padding:8px 12px;font-size:18px}
.mwn-rechner__hinweis{margin-top:10px}
.mwn-rechner__ergebnis{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;row-gap:2px;align-items:center;padding:22px 26px}
.mwn-rechner__zahl{grid-column:1;grid-row:1/span 3;margin:0;font-size:76px}
.mwn-rechner__klein,.mwn-rechner__einheit,.mwn-rechner__satz{grid-column:2}
.mwn-rechner__einheit{margin-top:0;font-size:18px}
.mwn-rechner__satz{margin-top:2px;font-size:14px}
.mwn-rechner__balken{grid-column:1/-1;margin-top:16px}
@media (max-width:680px){.mwn-rechner{margin-top:56px;gap:28px}.mwn-rechner__zahl{font-size:60px}.mwn-rechner__ergebnis{padding:20px}}

/* Bestandteile ohne Abstand unten (Philipp 26.10.2026), Link zum Festpreis als CTA in der Tabellenzelle „Passt, wenn“ */
#inklusive{padding-bottom:0}
.mwn-tabelle .mwn-tabelle__cta{display:table;margin-top:10px;font-weight:600}


/* Hero wieder weiß wie die übrigen Unterseiten (Philipp 26.10.2026), Rechner mit weniger Abstand nach oben */
.mwn-rechner{margin-top:40px}
/* Ablauf: Schritte 1 bis 4 als Ablauf-Reihe wie auf den anderen Seiten, darunter die Entscheidung nach 24 Monaten als schmale,
   abgesetzte Leiste (Philipp 26.10.2026: „visuell abgegrenzt, aber platzsparend und Bestandteil der Sektion“) */
.mwn-entscheidung{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px 28px;margin-top:32px;padding:18px 26px;border-radius:var(--radius);background:var(--lime-soft);border:1px solid var(--mint)}
.mwn-entscheidung__kopf{display:grid;gap:6px;justify-items:start;padding-right:28px;border-right:1px solid var(--mint)}
.mwn-entscheidung__kopf strong{font:600 17px/1.2 var(--sans);color:var(--black)}
.mwn-entscheidung__wahl{display:grid;gap:3px}
.mwn-entscheidung__wahl b{font:600 15.5px/1.3 var(--sans);color:var(--black)}
.mwn-entscheidung__wahl span{font:400 14.5px/1.45 var(--sans);color:var(--text-2)}
.mwn-entscheidung__oder{font:400 13px/1 var(--mono);color:var(--text-2)}
@media (max-width:900px){
  .mwn-entscheidung{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 20px}
  .mwn-entscheidung__kopf{padding:0 0 12px;border-right:0;border-bottom:1px solid var(--mint)}
}

/* Korrekturen 26.10.2026 (Philipp) */
/* Bildwelt „Texte“: Textentwurf mit einer markierten Zeile */
.mwn-text{position:absolute;left:22px;right:22px;top:18px;bottom:-12px;display:grid;gap:7px;align-content:start;padding:14px 14px 0;background:#fff;border:1px solid var(--line);border-radius:10px 10px 0 0}
.mwn-text__h{width:62%;height:9px;background:var(--black)}
.mwn-text__z{height:5px;background:var(--g200)}
.mwn-text__z--an{background:var(--mint);box-shadow:0 0 0 2px var(--mint)}
.mwn-text__z--kurz{width:58%}
.mwn-text__chip{justify-self:start;white-space:nowrap;margin-top:6px;padding:4px 9px;border-radius:999px;background:var(--black);color:#fff;font:500 10px/1 var(--mono)}
/* Entscheidung nach 24 Monaten hell (Philipp 26.10.2026: „invertieren. weißer hintegrund und alle schrfiten dunkel“) */
.mwn-entscheidung{background:#fff;border-color:var(--line)}
.mwn-entscheidung__kopf{border-right-color:var(--line)}
@media (max-width:900px){.mwn-entscheidung__kopf{border-bottom-color:var(--line)}}
/* Vorher/Nachher auf Schwarz mit dunklen Karten */
#vorher-nachher .mwn-liste li{color:#fff;border-bottom-color:var(--line-dark)}
#vorher-nachher .mwn-liste li::before{background:var(--mint);color:var(--black)}
#vorher-nachher .mwn-liste--ohne li{color:var(--on-dark-2)}
#vorher-nachher .mwn-liste--ohne li::before{background:transparent;color:var(--on-dark-2);border-color:rgba(255,255,255,.3)}
#vorher-nachher .mwn-mit{border-color:var(--mint)}
/* Collage höher, damit die Mockups nicht angeschnitten werden; Award-Grafik oben rechts */
#erstellung .why__visual{height:640px}
@media (max-width:680px){#erstellung .why__visual{height:440px}}

/* Entscheidung nach 24 Monaten optimiert (Philipp 26.10.2026): Kopf links, zwei Optionen als Felder mit Icon, dazwischen „/“
   statt des Oder-Kreises; die überfahrene Option bekommt Kontur und schwarzes Icon („hovern zwischen links und rechts“) */
.mwn-entscheidung{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto minmax(0,1fr);gap:18px 20px;padding:22px 24px}
.mwn-entscheidung__kopf{gap:8px;padding-right:20px}
.mwn-entscheidung__kopf strong{font-size:18px;line-height:1.25}
.mwn-entscheidung__kopf small{font:400 13px/1.4 var(--sans);color:var(--text-2)}
.mwn-entscheidung__wahl{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);transition:border-color 150ms linear}
.mwn-entscheidung__wahl:hover{border-color:var(--black)}
.mwn-entscheidung__wahl:hover .mwn-entscheidung__icon{background:var(--black);color:#fff}
.mwn-entscheidung__wahl>div{display:grid;gap:3px}
.mwn-entscheidung__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--black);transition:background 150ms linear,color 150ms linear}
.mwn-entscheidung__icon svg{width:20px;height:20px}
.mwn-entscheidung__oder{font:200 52px/1 var(--sans);color:var(--g300)}
@media (max-width:900px){.mwn-entscheidung{grid-template-columns:minmax(0,1fr)}.mwn-entscheidung__oder{justify-self:center;font-size:30px;line-height:.8}}

/* Vergleich und Rechner in einer Sektion, seit 26.10.2026 abends auf hellem Grund (Philipp: „heller hintegrund“):
   der Rechner steht in einem weißen Feld gleicher Breite unter der Tabelle, das Ergebnis bleibt schwarz */
#vergleich .mwn-rechner{max-width:1100px;margin-top:40px;padding:28px 32px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
#vergleich .mwn-rechner__ergebnis{box-shadow:none}
@media (max-width:680px){#vergleich .mwn-rechner{padding:22px 18px}}
#vergleich .mwn-tabelle{color:var(--petrol)}
#vergleich .mwn-tabelle td:not(.hl){color:var(--text-2)}
/* Icon-Kreis nicht von der Textfarbe der Optionen überschreiben */
.mwn-entscheidung__wahl:not(:hover) .mwn-entscheidung__icon{color:var(--black)}