/* ==========================================================================
   Webseiten-Check im Look von «AI with Milo» (www.iweb4u.ch/milo/)

   Zwei Teile:
   1. Die Seite selbst (Klassen m-*).
   2. Ein Kleid für das Ergebnis-Dashboard (Klassen wcx-*, rb-*, wcxm-*).
      Die Kopie von webseiten-check.css daneben bleibt UNVERÄNDERT — sie ist
      dieselbe Datei wie auf der Hauptseite. Hier werden nur ihre Farbwerte
      (dunkles Thema) auf das helle Milo-Thema umgestellt und die Formen
      angepasst. Kommen in der Hauptdatei neue Bausteine dazu, erscheinen sie
      hier zuerst mit den Grundwerten unten (Token) und brauchen allenfalls
      eine eigene Zeile.

   Bildsprache, abgeleitet aus Banner, Vorschaubildern und Videos des Kanals:
   - Pfirsich-Creme-Verlauf, weiche Kreise in Minze und Pfirsich, Punktraster,
     Leiterbahnen mit Lötpunkten, vierzackige Funken mit dunkler Kontur
   - Poppins: ExtraBold für Titel, SemiBold für Etiketten
   - dunkle Pillen (weisse Schrift), korallenrote Marker (dunkle Schrift),
     geteilte Pillen «RULE 1 | Four blocks»
   - Flächen in Minze, Koralle, Gelb und Lavendel, immer mit dunkler Kontur
   - weisse Karten mit weichem, warmem Schatten; Hinweise mit Koralle-Leiste
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schrift: Poppins aus dem eigenen Ordner (kein Google-Fonts-Abruf).
   400–700 sind dieselben Dateien wie auf www.iweb4u.ch, 800 ist aus der
   Originalschrift (OFL, siehe fonts/OFL.txt) auf denselben Zeichenumfang
   zugeschnitten.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------------
   Farben und Grundwerte
   -------------------------------------------------------------------------- */
:root {
    /* Milo-Palette (gemessen an den Vorschaubildern des Kanals) */
    --m-ink: #2B2B33;          /* Konturen und Schrift */
    --m-ink-2: #46434E;        /* Fliesstext */
    --m-ink-3: #66616D;        /* Nebentext (6.0:1 auf Weiss) */
    --m-ink-4: #75707B;        /* Fussnoten (4.8:1 auf Weiss) */
    --m-bg: #FFF4EA;
    --m-creme: #FFF8F1;
    --m-pfirsich-1: #FFEBDD;
    --m-pfirsich-2: #FFD9C2;
    --m-pfirsich-3: #FFC7A6;
    --m-koralle: #F2786A;
    --m-koralle-hell: #F9B2A8;
    --m-koralle-text: #B9473A; /* Koralle als Schrift: 5.2:1 auf Weiss */
    --m-minze: #A8DCC4;
    --m-minze-hell: #DDF2E8;
    --m-minze-text: #2B7A5E;   /* 5.2:1 auf Weiss */
    --m-gelb: #FFD166;
    --m-gelb-hell: #FFF0C7;
    --m-gelb-text: #8A5F00;    /* 5.6:1 auf Weiss */
    --m-lila: #A3B4E6;
    --m-lila-hell: #E3E9FA;
    --m-lila-text: #3F55A5;    /* 6.9:1 auf Weiss */
    --m-grau: #67626E;
    --m-kontur: 2.5px;
    --m-schatten: 0 16px 34px -20px rgba(130, 64, 30, .55);
    --m-schatten-klein: 0 10px 22px -16px rgba(130, 64, 30, .55);

    /* Werte, die webseiten-check.css von der Hauptseite erwartet. Dort ist
       das Thema dunkel — hier dieselben Namen mit hellen Werten. */
    --acc1: #F2786A;
    --acc2: #EC6656;
    --acc-soft: #B9473A;
    --acc-shadow: rgba(185, 71, 58, .28);
    --acc-glow: rgba(242, 120, 106, .14);
    --bg-dark: #FFF8F1;
    --card-dark: #FFFFFF;
    --line-dark: rgba(43, 43, 51, .14);
    --text-on-dark: #2B2B33;
    --text-on-dark-mut: #46434E;
    --text-on-dark-dim: #66616D;
    --text-on-dark-faint: #75707B;
    --ok: #2B7A5E;
    --r-card: 22px;
    --r-pill: 999px;
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px; line-height: 1.6;
    color: var(--m-ink);
    /* Der Verlauf trägt Kopfzeile und Einstieg gemeinsam */
    background:
        radial-gradient(900px 520px at 88% 6%, rgba(255, 246, 238, .95), rgba(255, 246, 238, 0) 70%),
        linear-gradient(180deg, rgba(255, 244, 234, 0) 55%, #FFF4EA 100%) top / 100% 1080px no-repeat,
        linear-gradient(118deg, #FFCDAE 0%, #FFDDC8 32%, #FFEDE0 62%, #FFF4EA 100%) top / 100% 1080px no-repeat,
        var(--m-bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; }
.m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Breite wie auf der Hauptseite (container-x: 1400px, Rand 16px bzw. 24px ab 992px):
   So stehen die sieben Kacheln auf breiten Bildschirmen in zwei Reihen à vier. */
.m-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 992px) { .m-wrap { padding: 0 24px; } }
:focus-visible { outline: 3px solid var(--m-ink); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Kopfzeile: AI with Milo × iweb4u
   -------------------------------------------------------------------------- */
.m-kopfzeile { position: relative; z-index: 3; padding: 18px 0 0; }
.m-kopfzeile-innen { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
.m-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--m-ink); }
.m-avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--m-creme);
    border: 3px solid var(--m-koralle);
    box-shadow: 0 0 0 2px var(--m-ink);
    overflow: hidden;
}
.m-avatar svg { width: 100%; height: 100%; transform: translateY(4%); }
.m-avatar-gross { width: 72px; height: 72px; }
.m-wortmarke { font-weight: 700; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.m-milo { position: relative; color: var(--m-koralle); }
.m-schwung { position: absolute; left: -2%; bottom: -7px; width: 104%; height: 9px; overflow: visible; }
.m-sprachen { margin-left: auto; display: inline-flex; gap: 6px; }
.m-sprachen a {
    display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 10px;
    border: 2px solid var(--m-ink); border-radius: 999px; background: #fff;
    font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-decoration: none; color: var(--m-ink);
}
.m-sprachen a[aria-current="page"] { background: var(--m-ink); color: #fff; }
.m-sprachen a:hover:not([aria-current="page"]) { background: var(--m-pfirsich-1); }

/* --------------------------------------------------------------------------
   Einstieg
   -------------------------------------------------------------------------- */
.m-held { position: relative; padding: 18px 0 56px; }
.m-deko { position: absolute; inset: -90px 0 0 0; pointer-events: none; overflow: hidden; z-index: 0; }
.m-blase-gross { position: absolute; border-radius: 50%; }
.m-blase-minze { width: 420px; height: 420px; left: -190px; top: 260px; background: #D3EFE2; opacity: .75; }
.m-blase-pfirsich { width: 460px; height: 460px; right: -170px; top: -170px; background: #FFE2D0; opacity: .9; }
.m-punkte {
    position: absolute; width: 132px; height: 84px;
    background: radial-gradient(circle, #EDB596 1.7px, transparent 2px) 0 0 / 16px 16px;
    opacity: .8;
}
.m-punkte-a { left: 46%; top: 120px; }
.m-punkte-b { left: 3%; bottom: 40px; }
.m-leiterbahnen { position: absolute; right: 0; top: 90px; height: calc(100% - 90px); width: min(62%, 720px); }
.m-bahn { stroke: #9CD4BC; }
.m-bahn:nth-child(2n) { stroke: #F3B597; }
.m-loetpunkte circle { fill: #FFF8F1; stroke: #9CD4BC; }
.m-loetpunkte circle:nth-child(2n) { stroke: #F3B597; }

.m-held-raster {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 24px 48px; align-items: center; padding-top: 30px;
}
.m-kicker {
    display: inline-block; margin: 0 0 18px;
    background: var(--m-ink); color: #fff;
    font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .01em;
    padding: 10px 17px 9px; border-radius: 999px;
}
.m-titel {
    margin: 0 0 18px;
    font-weight: 800; font-size: clamp(36px, 5.3vw, 64px); line-height: 1.04; letter-spacing: -.025em;
    color: var(--m-ink);
}
.m-marker {
    display: inline-block; margin-top: .14em;
    background: var(--m-koralle); color: var(--m-ink);
    padding: .04em .26em .07em; border-radius: .2em;
    text-transform: uppercase; letter-spacing: -.01em;
    transform: rotate(-1.6deg);
    box-shadow: 0 14px 26px -14px rgba(185, 71, 58, .75);
}
.m-lead { margin: 0 0 26px; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--m-ink-2); }

/* Karte mit dem Formular */
.m-karte {
    background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 24px;
    box-shadow: var(--m-schatten);
}
.m-formkarte { padding: 24px 24px 22px; }
.m-split {
    display: inline-flex; margin: 0 0 16px; overflow: hidden;
    border: 2px solid var(--m-ink); border-radius: 999px;
    font-weight: 700; font-size: 12.5px; line-height: 1;
    background: #fff; box-shadow: var(--m-schatten-klein);
}
.m-split span { padding: 8px 14px 7px; }
.m-split span:first-child {
    background: var(--m-koralle); border-right: 2px solid var(--m-ink);
    text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; padding-top: 8.5px;
}
.m-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 15px; }
.m-formzeile { display: flex; flex-wrap: wrap; gap: 12px; }
.m-eingabe {
    flex: 1 1 250px; min-width: 0; min-height: 58px;
    font: 500 16.5px/1.2 var(--font-sans); color: var(--m-ink);
    padding: 15px 18px; background: var(--m-creme);
    border: var(--m-kontur) solid var(--m-ink); border-radius: 16px;
    transition: box-shadow .15s, background .15s;
}
.m-eingabe::placeholder { color: #9A939F; }
.m-eingabe:focus { outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(242, 120, 106, .38); }
.m-knopf {
    flex: 0 0 auto; min-height: 58px;
    font: 700 16.5px/1.2 var(--font-sans); color: var(--m-ink);
    padding: 15px 24px; background: var(--m-koralle);
    border: var(--m-kontur) solid var(--m-ink); border-radius: 16px;
    box-shadow: 0 5px 0 var(--m-ink);
    cursor: pointer; transition: transform .12s, box-shadow .12s, background .15s;
}
.m-knopf:hover { background: #F4867A; transform: translateY(-1px); box-shadow: 0 6px 0 var(--m-ink); }
.m-knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--m-ink); }
.m-haekchen { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.m-haekchen li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--m-ink-2); }
.m-haekchen svg {
    width: 22px; height: 22px; flex: none; padding: 1px;
    background: var(--m-minze); border: 2px solid var(--m-ink); border-radius: 50%;
}
.m-checkresult:not(:empty) { margin-top: 20px; }

/* Milo mit Sprechblase */
.m-figur { position: relative; display: flex; flex-direction: column; align-items: center; }
.m-sprechblase {
    position: relative; z-index: 2; margin: 0 0 22px; max-width: 320px;
    background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 20px;
    padding: 14px 18px; box-shadow: var(--m-schatten);
    font-weight: 600; font-size: 15.5px; line-height: 1.45; color: var(--m-ink);
    text-align: center;
}
.m-sprechblase::after {
    content: ''; position: absolute; left: 50%; bottom: -11px;
    width: 18px; height: 18px; background: #fff;
    border-right: var(--m-kontur) solid var(--m-ink); border-bottom: var(--m-kontur) solid var(--m-ink);
    border-bottom-right-radius: 4px;
    transform: translateX(-50%) rotate(45deg);
}
.m-sprechblase.m-neu { animation: m-pop .38s cubic-bezier(.3, 1.5, .6, 1); }
@keyframes m-pop { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

.m-roboter-box { position: relative; width: min(100%, 300px); }
.m-roboter { display: block; width: 100%; height: auto; overflow: visible; animation: m-schweben 4.2s ease-in-out infinite; }
.m-schatten { fill: var(--m-ink); opacity: .12; animation: m-schatten 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* Funken rund um Milo — Lage in Prozent der Figur, damit sie nie auf dem Gesicht landen */
.m-funke {
    position: absolute; z-index: 2; height: auto; overflow: visible; pointer-events: none;
    stroke: var(--m-ink); animation: m-funkeln 3.2s ease-in-out infinite;
}
.m-funke-1 { left: -14%; top: 22%; width: 13%; fill: var(--m-gelb); }
.m-funke-2 { right: -12%; top: 6%; width: 10%; fill: var(--m-koralle); animation-delay: .8s; }
.m-funke-3 { right: -15%; top: 62%; width: 9%; fill: var(--m-lila); animation-delay: 1.5s; }
.m-funke-4 { left: -9%; top: 70%; width: 8%; fill: var(--m-gelb); animation-delay: 2.1s; }

@keyframes m-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes m-schatten { 0%, 100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.9); opacity: .08; } }
@keyframes m-funkeln { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(18deg); } }

/* Arm winkt, Augen blinzeln */
.m-arm-links { transform-box: view-box; transform-origin: 72px 222px; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
/* Bei mittleren und schwachen Werten winkt Milo nicht, der Arm hängt */
[data-milo="hmm"] .m-arm-links,
[data-milo="oje"] .m-arm-links,
[data-milo="ups"] .m-arm-links { transform: rotate(-112deg); }
[data-milo="hallo"] .m-arm-links,
[data-milo="super"] .m-arm-links { animation: m-winken 2.8s ease-in-out infinite; }
@keyframes m-winken {
    0%, 52%, 100% { transform: rotate(0); }
    12% { transform: rotate(-16deg); }
    24% { transform: rotate(7deg); }
    36% { transform: rotate(-13deg); }
    46% { transform: rotate(3deg); }
}
.m-augen { transform-box: fill-box; transform-origin: center; animation: m-blinzeln 5.5s infinite; }
@keyframes m-blinzeln { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } }

/* Stimmungen — milo.js setzt data-milo auf <html> */
.m-augen-froh, .m-brauen, .m-mund { display: none; }
.m-mund-laecheln { display: inline; }
[data-milo="denkt"] .m-augen { animation: m-umschauen 2.4s ease-in-out infinite; }
@keyframes m-umschauen { 0%, 100% { transform: translate(4px, -3px); } 50% { transform: translate(-4px, -3px); } }
[data-milo="denkt"] .m-mund-laecheln { display: none; }
[data-milo="denkt"] .m-mund-flach { display: inline; }
[data-milo="denkt"] .m-antenne { animation: m-antenne .9s ease-in-out infinite; }
@keyframes m-antenne { 0%, 100% { fill: #F2786A; } 50% { fill: #FFD166; } }
[data-milo="denkt"] .m-lampe { animation: m-lampe 1.2s steps(1) infinite; }
[data-milo="denkt"] .m-lampe-2 { animation-delay: .4s; }
[data-milo="denkt"] .m-lampe-3 { animation-delay: .8s; }
@keyframes m-lampe { 0% { opacity: 1; } 33% { opacity: .25; } }
[data-milo="super"] .m-augen { display: none; }
[data-milo="super"] .m-augen-froh { display: inline; }
[data-milo="super"] .m-mund-laecheln { display: none; }
[data-milo="super"] .m-mund-gross { display: inline; }
[data-milo="super"] .m-funke { animation-duration: 1.4s; }
[data-milo="hmm"] .m-mund-laecheln,
[data-milo="ups"] .m-mund-laecheln { display: none; }
[data-milo="hmm"] .m-mund-o,
[data-milo="ups"] .m-mund-o { display: inline; }
[data-milo="oje"] .m-mund-laecheln { display: none; }
[data-milo="oje"] .m-mund-traurig,
[data-milo="oje"] .m-brauen,
[data-milo="ups"] .m-brauen { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .m-roboter, .m-schatten, .m-funke, .m-augen, .m-arm-links, .m-antenne, .m-lampe { animation: none !important; }
    .m-sprechblase.m-neu { animation: none; }
}

/* --------------------------------------------------------------------------
   Ergebnis: Platz für das Dashboard
   -------------------------------------------------------------------------- */
.m-ergebnis { position: relative; z-index: 1; }
#checkDashboard:not(:empty) { padding: 0 0 48px; }
/* Milo kommentiert das Ergebnis: Avatar und Sprechblase direkt darüber */
.m-ergebnis-milo { display: flex; align-items: center; gap: 16px; padding-top: 26px; }
.m-ergebnis-milo[hidden] { display: none; }
.m-ergebnis-milo .m-avatar { width: 56px; height: 56px; }
.m-ergebnis-satz {
    position: relative; margin: 0 0 0 4px; padding: 11px 18px;
    background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 18px;
    box-shadow: var(--m-schatten-klein);
    font-weight: 600; font-size: 15.5px; line-height: 1.45;
}
.m-ergebnis-satz::before {
    content: ''; position: absolute; left: -10px; top: 50%;
    width: 16px; height: 16px; background: #fff;
    border-left: var(--m-kontur) solid var(--m-ink); border-bottom: var(--m-kontur) solid var(--m-ink);
    border-bottom-left-radius: 3px;
    transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   Sieben Bereiche
   -------------------------------------------------------------------------- */
.m-bereiche { padding: 64px 0 56px; background: var(--m-creme); border-top: var(--m-kontur) solid var(--m-ink); }
.m-h2 {
    margin: 16px 0 28px;
    font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.02em;
}
.m-tabelle { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-zeile {
    display: grid; grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
    background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 16px; overflow: hidden;
    box-shadow: var(--m-schatten-klein);
}
.m-zelle-kopf {
    display: block; padding: 14px 18px 13px; background: var(--ton);
    border-right: var(--m-kontur) solid var(--m-ink);
    font-weight: 700; font-size: 17px; line-height: 1.25;
}
.m-zelle-kopf b { font-weight: 800; margin-right: 4px; }
.m-zelle-kopf small { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: var(--m-ink); }
.m-zelle-text { display: flex; align-items: center; padding: 14px 20px; font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }
.m-ton-lila { --ton: var(--m-lila); }
.m-ton-koralle { --ton: var(--m-koralle); }
.m-ton-minze { --ton: var(--m-minze); }
.m-ton-gelb { --ton: var(--m-gelb); }

/* --------------------------------------------------------------------------
   Ablauf
   -------------------------------------------------------------------------- */
.m-ablauf { padding: 56px 0 72px; background: linear-gradient(180deg, var(--m-creme), var(--m-pfirsich-1)); }
.m-ablauf-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 48px; align-items: center; }
.m-pille-koralle {
    display: inline-block; margin: 0;
    background: var(--m-koralle); color: var(--m-ink);
    border: 2px solid var(--m-ink); border-radius: 999px;
    padding: 7px 15px 6px; font-weight: 700; font-size: 13px; line-height: 1.2;
}
.m-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-schritte li {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border-radius: 16px; padding: 14px 18px;
    border: 1.5px solid rgba(43, 43, 51, .1); box-shadow: var(--m-schatten-klein);
    font-size: 14.5px; line-height: 1.45; color: var(--m-ink-3);
}
.m-schritte b { display: block; font-weight: 700; font-size: 16px; color: var(--m-ink); }
.m-nummer {
    flex: 0 0 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--ton); border: 2px solid var(--m-ink);
    font-weight: 800; font-size: 16px; color: var(--m-ink);
}
.m-merksatz {
    background: #fff; border-radius: 18px; border-left: 7px solid var(--m-koralle);
    padding: 22px 24px; box-shadow: var(--m-schatten);
}
.m-merksatz p { margin: 0 0 14px; font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--m-ink-2); }
.m-merksatz b { color: var(--m-ink); }
.m-nach-oben { font-weight: 700; color: var(--m-koralle-text); text-decoration: none; border-bottom: 2px solid currentColor; }
.m-nach-oben:hover { color: var(--m-ink); }

/* --------------------------------------------------------------------------
   Fuss
   -------------------------------------------------------------------------- */
.m-fuss { background: var(--m-pfirsich-2); border-top: var(--m-kontur) solid var(--m-ink); padding: 40px 0 26px; font-size: 14.5px; }
.m-fuss-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px 40px; }
.m-fuss-marken { display: flex; gap: 16px; align-items: flex-start; }
.m-fuss-marken p { margin: 0; color: var(--m-ink-2); line-height: 1.6; }
.m-fuss-marken a { font-weight: 600; }
.m-fuss-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; color: var(--m-ink-2); }
.m-fuss-links a { font-weight: 600; }
.m-fuss a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.m-fuss a:hover { color: var(--m-koralle-text); }
.m-fuss-zeile { margin: 28px 0 0; padding-top: 16px; border-top: 1.5px dashed rgba(43, 43, 51, .3); font-size: 13px; color: var(--m-ink-3); }

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .m-held-raster { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
    /* Milo steht oben als Zeile neben seiner Sprechblase, damit das Formular
       auf dem Telefon nicht unter den Bildrand rutscht. */
    .m-figur { order: -1; flex-direction: row-reverse; align-items: flex-end; gap: 14px; }
    .m-roboter-box { width: 112px; flex: none; }
    .m-funke { display: none; }
    .m-sprechblase { margin: 0 0 26px; max-width: none; flex: 1 1 auto; text-align: left; font-size: 14.5px; padding: 12px 15px; }
    /* Spitze senkrecht in der Mitte (16.10.2026): Fest 20 px über dem Boden lag sie bei einzeiligen Sätzen
       in der runden Ecke oben links, und der Rand brach dort (Meldung des Kunden mit Bildschirmfoto). */
    .m-sprechblase::after { left: -11px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
    .m-leiterbahnen { width: 100%; opacity: .55; }
    .m-ablauf-raster { grid-template-columns: minmax(0, 1fr); }
    .m-fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .m-fuss-marken { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .m-kopfzeile-innen { gap: 10px; }
    .m-avatar { width: 40px; height: 40px; }
    .m-wortmarke { font-size: 17px; }
    .m-sprachen a { min-width: 36px; height: 30px; padding: 0 8px; }
    .m-held { padding-bottom: 40px; }
    .m-lead { font-size: 16.5px; margin-bottom: 22px; }
    .m-formkarte { padding: 20px 16px 18px; border-radius: 20px; }
    .m-knopf { width: 100%; }
    .m-zeile { grid-template-columns: minmax(0, 1fr); }
    .m-zelle-kopf { border-right: 0; border-bottom: var(--m-kontur) solid var(--m-ink); }
    .m-zelle-text { padding: 12px 18px 14px; }
    .m-bereiche, .m-ablauf { padding-top: 48px; padding-bottom: 48px; }
    .m-fuss-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .m-sprachen { margin-left: 0; }
    .m-roboter-box { width: 92px; }
}


/* ==========================================================================
   2. Das Ergebnis-Dashboard im Milo-Kleid
   ========================================================================== */
.wcx-dash {
    --wcx-warn: var(--m-gelb-text);
    --wcx-fail: var(--m-koralle-text);
    --wcx-low: #B8513A;
    --wcx-crit: #A8322A;
    --wcx-grad: linear-gradient(92deg, #F2786A, #F2786A);
    --wcx-mono: var(--font-sans);
    --wcx-line: rgba(43, 43, 51, .12);
    font-family: var(--font-sans);
    /* Nach der Prüfung scrollt der Checker hierher — Platz lassen für Milos
       Kommentar darüber (.m-ergebnis-milo) */
    scroll-margin-top: 92px;
}

/* Fortschritt: statt Terminal eine Liste wie in den Videos */
.wcx-progress { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; }
.wcx-progress .wcx-cmd {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    margin-bottom: 12px; padding: 8px 14px 7px; border-radius: 999px;
    background: var(--m-ink); color: #fff; text-transform: none;
    font-weight: 600; font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere;
}
.wcx-blink { background: var(--m-koralle); width: 8px; height: 13px; border-radius: 2px; vertical-align: -1px; }
.wcx-progress .wcx-step {
    display: flex; align-items: center; gap: 10px; margin: 0 0 7px; padding: 8px 14px 8px 8px;
    background: #fff; border: 2px solid var(--m-ink); border-radius: 999px;
    color: var(--m-ink); font-weight: 600; font-size: 13.5px; line-height: 1.35;
    box-shadow: var(--m-schatten-klein);
}
.wcx-progress .wcx-step .wcx-tick {
    flex: 0 0 24px; height: 24px; margin: 0; display: inline-grid; place-items: center;
    border-radius: 50%; background: var(--m-minze); border: 2px solid var(--m-ink);
    color: var(--m-ink); font-size: 12px; font-weight: 800;
}
.wcx-progress .wcx-step:last-child:not(:only-child) .wcx-tick { background: var(--m-gelb); }

/* Fehlermeldung: Hinweis mit Koralle-Leiste */
.wcx-error {
    color: var(--m-ink); background: #fff; font-size: 14.5px; font-weight: 500;
    border: 2px solid var(--m-ink); border-left: 8px solid var(--m-koralle); border-radius: 14px;
    box-shadow: var(--m-schatten-klein);
}

/* Einladung (statt oder unter dem Ergebnis) */
.wcx-einladung {
    background: var(--m-minze-hell); border: var(--m-kontur) solid var(--m-ink);
    box-shadow: var(--m-schatten);
}
.wcx-einladung-titel { font-weight: 800; }
.wcx-einladung-liste li::before { content: '✓'; color: var(--m-minze-text); font-weight: 800; }
.wcx-einladung-mail a { color: var(--m-koralle-text); font-weight: 600; }

/* Kopf: Ring, Note, Adresse, Knöpfe */
.wcx-head {
    background:
        radial-gradient(420px 220px at 0% 0%, rgba(255, 217, 194, .75), rgba(255, 217, 194, 0) 70%),
        #fff;
    border: var(--m-kontur) solid var(--m-ink); border-radius: 26px;
    box-shadow: var(--m-schatten);
}
.wcx-ring { border-radius: 50%; background: #fff; }
.wcx-ring .wcx-ring-bg { stroke: var(--m-pfirsich-1); }
.wcx-ring svg { position: relative; z-index: 1; }
/* Kontur um die Bahn, wie beim Balken in den Videos: aussen und innen ein
   dunkler Ring. Die Masse folgen dem SVG (r 52, Strich 9, viewBox 120). */
.wcx-ring::before, .wcx-ring::after {
    content: ''; position: absolute; z-index: 2; border-radius: 50%;
    border: 2px solid var(--m-ink); pointer-events: none;
}
.wcx-ring::before { inset: calc(2.917% - 1px); }
.wcx-ring::after { inset: calc(10.417% - 1px); }
.wcx-ring-num { z-index: 3; font-weight: 800; color: var(--m-ink); letter-spacing: -.02em; }
.wcx-ring-num small { font-family: var(--font-sans); font-weight: 600; letter-spacing: .02em; color: var(--m-ink-3); }
/* Ringfarbe je Note — überschreibt den Verlauf aus dem Skript */
.wcx-head:has(.g-good) .wcx-ring-val { stroke: #7FCFAB; }
.wcx-head:has(.g-mid) .wcx-ring-val { stroke: #FFC94A; }
.wcx-head:has(.g-low) .wcx-ring-val { stroke: #F59384; }
.wcx-head:has(.g-bad) .wcx-ring-val { stroke: #EE5E4E; }

.wcx-grade {
    font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .05em;
    padding: 6px 13px 5px; border: 2px solid var(--m-ink); color: var(--m-ink);
    background: #fff;
}
.wcx-grade.g-good { background: var(--m-minze); border-color: var(--m-ink); color: var(--m-ink); }
.wcx-grade.g-mid { background: var(--m-gelb); border-color: var(--m-ink); color: var(--m-ink); }
.wcx-grade.g-low { background: var(--m-koralle-hell); border-color: var(--m-ink); color: var(--m-ink); }
.wcx-grade.g-bad { background: var(--m-koralle); border-color: var(--m-ink); color: var(--m-ink); }
.wcx-head-url { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--m-ink-3); }
.wcx-head-comment { font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--m-ink); }
.wcx-head-meta { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .04em; text-transform: none; color: var(--m-ink-4); }

/* Knöpfe */
.wcx-btn {
    background: var(--m-koralle); color: var(--m-ink);
    border: var(--m-kontur) solid var(--m-ink); font-weight: 700;
    box-shadow: 0 5px 0 var(--m-ink);
    transition: transform .12s, box-shadow .12s, background .15s;
}
.wcx-btn:hover { color: var(--m-ink); filter: none; background: #F4867A; transform: translateY(-1px); box-shadow: 0 6px 0 var(--m-ink); }
.wcx-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--m-ink); }
.wcx-btn-ghost {
    background: #fff; color: var(--m-ink);
    border: 2px solid var(--m-ink); font-weight: 600;
}
.wcx-btn-ghost:hover { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-pfirsich-1); }
.wcx-aus, .wcx-aus:hover { color: var(--m-ink-4); background: #fff; }
.wcx-btn-ghost.wcx-aus { border-color: rgba(43, 43, 51, .35); }
.wcx-rolle-b { color: var(--m-koralle-text); }
.wcx-rolle:hover, .wcx-rolle:focus, .wcx-rolle:focus-visible { border-color: var(--m-ink); background: var(--m-pfirsich-1); }
.wcx-bericht-hinweis { color: var(--m-ink-3); }
.wcx-bericht-hinweis a { color: var(--m-koralle-text); font-weight: 600; }

/* Reiter */
.wcx-tabs {
    background: #fff; border: var(--m-kontur) solid var(--m-ink);
    box-shadow: var(--m-schatten-klein); padding: 6px;
}
.wcx-tab { color: var(--m-ink-3); font-weight: 600; }
.wcx-tab:hover { color: var(--m-ink); background: var(--m-pfirsich-1); }
.wcx-tab.wcx-on {
    background: var(--m-koralle); color: var(--m-ink);
    box-shadow: inset 0 0 0 2px var(--m-ink);
}
.wcx-tab .wcx-count {
    font-family: var(--font-sans); font-weight: 700; font-size: 11px;
    background: #fff; color: var(--m-ink); border: 1.5px solid var(--m-ink);
}
.wcx-tab:not(.wcx-on) .wcx-count { background: var(--m-pfirsich-1); color: var(--m-ink-2); border-color: rgba(43, 43, 51, .35); }
.wcx-tab-badge {
    font-family: var(--font-sans); font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
    background: var(--m-gelb); color: var(--m-ink); border: 1.5px solid var(--m-ink);
}
.wcx-tab.wcx-on .wcx-tab-badge { background: var(--m-gelb); color: var(--m-ink); }

/* Kacheln je Kategorie */
.wcx-cat {
    background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 22px;
    box-shadow: var(--m-schatten-klein);
}
.wcx-cat-no {
    display: inline-block; margin-bottom: 6px;
    font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .06em;
    color: var(--m-ink); background: var(--m-koralle);
    border: 1.5px solid var(--m-ink); border-radius: 999px; padding: 3px 9px 2px;
}
.wcx-cat > .wcx-cat-no { align-self: flex-start; }   /* im Reiter «Sichtbarkeit» direkt in der Kachel */
.wcx-cat:nth-child(4n+2) .wcx-cat-no { background: var(--m-minze); }
.wcx-cat:nth-child(4n+3) .wcx-cat-no { background: var(--m-gelb); }
.wcx-cat:nth-child(4n+4) .wcx-cat-no { background: var(--m-lila); }
.wcx-cat-title { font-weight: 700; font-size: 17px; color: var(--m-ink); }
.wcx-cat-score { font-weight: 800; letter-spacing: -.02em; }
.wcx-cat-score small { font-family: var(--font-sans); font-weight: 600; color: var(--m-ink-4); }
.wcx-score-good { color: var(--m-minze-text); }

/* Balken: Bahn mit Kontur, Füllung in Minze / Gelb / Koralle */
.wcx-bar { height: 14px; background: var(--m-creme); border: 2px solid var(--m-ink); }
.wcx-bar i { background: var(--m-minze); border-radius: 999px; }
.wcx-bar.b-mid i { background: var(--m-gelb); }
.wcx-bar.b-low i { background: var(--m-koralle-hell); }
.wcx-bar.b-bad i { background: var(--m-koralle); }
.wcx-pf .wcx-bar { height: 10px; }

.wcx-cat-stand { color: var(--m-ink-3); font-weight: 500; }
.wcx-cat-stand.ist-gruen { color: var(--m-minze-text); font-weight: 600; }
.wcx-cat-toggle {
    border: 2px solid var(--m-ink); color: var(--m-ink); background: #fff; font-weight: 600;
}
.wcx-cat-toggle:hover { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-pfirsich-1); }
.wcx-cat-toggle:focus-visible { outline: 3px solid var(--m-ink); }
.wcx-cat-toggle.wcx-aus, .wcx-cat-toggle.wcx-aus:hover { color: var(--m-ink-4); border-color: rgba(43, 43, 51, .3); background: #fff; }

/* Prüfpunkte mit runden Symbolen wie «What you need» */
.wcx-items > li { color: var(--m-ink-2); border-top-color: rgba(43, 43, 51, .1); align-items: flex-start; padding: 9px 0; }
/* Zeilen mit Symbol als Raster: Symbol | Text | Wert. Sonst bricht auf dem
   Telefon bei langem Hinweis der Text unter das Symbol und es steht allein. */
.wcx-items > li:has(> .wcx-ico) {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 2px; align-items: start;
}
.wcx-items > li:has(> .wcx-ico) > .wcx-msgs { grid-column: 2 / -1; margin-left: 0; }
.wcx-items > li:has(> .wcx-ico) > .wcx-item-value { max-width: 16em; text-align: right; }
@media (max-width: 640px) { .wcx-items > li:has(> .wcx-ico) > .wcx-item-value { max-width: 40vw; } }
.wcx-items > li:not(:has(> .wcx-ico)) { align-items: center; }
.wcx-ico {
    flex: 0 0 22px; width: 22px; height: 22px; margin-top: -1px;
    display: inline-grid; place-items: center; border-radius: 50%;
    border: 2px solid var(--m-ink); color: var(--m-ink);
    font-family: var(--font-sans); font-weight: 800; font-size: 11px; line-height: 1;
}
.wcx-ico.s-ok { background: var(--m-minze); color: var(--m-ink); }
.wcx-ico.s-warn { background: var(--m-gelb); color: var(--m-ink); }
.wcx-ico.s-fail { background: var(--m-koralle); color: var(--m-ink); }
.wcx-ico.s-info { background: var(--m-lila-hell); color: var(--m-ink); }
.wcx-item-label { padding-top: 1px; }
.wcx-item-value { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--m-ink-3); padding-top: 2px; }
.wcx-item-hint { color: var(--m-ink-3); font-size: 12px; }
.wcx-msgs summary, .wcx-msgs-btn {
    font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .03em;
    color: var(--m-koralle-text);
}
.wcx-msgs summary:hover, .wcx-msgs-btn:hover { color: var(--m-ink); }
.wcx-msg-kind { font-family: var(--font-sans); font-weight: 700; letter-spacing: .03em; color: var(--m-ink); border: 1.5px solid var(--m-ink); }
.wcx-msg-error .wcx-msg-kind { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-koralle-hell); }
.wcx-msg-warning .wcx-msg-kind { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-gelb-hell); }
.wcx-msg-info .wcx-msg-kind { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-lila-hell); }
.wcx-msg-text { color: var(--m-ink-2); }

/* KI-Plattformen */
.wcx-pf { background: var(--m-creme); border: 2px solid var(--m-ink); border-radius: 16px; }
.wcx-pf-name { font-weight: 700; }
.wcx-pf-state { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .04em; color: var(--m-ink); border: 1.5px solid var(--m-ink); }
.wcx-pf-state.p-ok { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-minze); }
.wcx-pf-state.p-warn { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-gelb); }
.wcx-pf-state.p-fail { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-koralle); }
.wcx-pf-score { font-family: var(--font-sans); font-weight: 700; color: var(--m-ink-2); }
.wcx-pf-note { color: var(--m-ink-3); }

/* Angebote in Kategorie 06 und 07: Umrissknopf in der Kachel */
.wcx-cat > .rb-block .rb-cta,
.wcx-cat > .rb-block.rb-theme-site .rb-cta {
    background: #fff; color: var(--m-ink); border: 2px solid var(--m-ink);
    font-weight: 700; box-shadow: 0 3px 0 var(--m-ink);
}
.wcx-cat > .rb-block .rb-cta:hover,
.wcx-cat > .rb-block.rb-theme-site .rb-cta:hover {
    background: var(--m-pfirsich-1); border-color: var(--m-ink); color: var(--m-ink);
}

/* Empfehlungen */
.wcx-rec { background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 18px; box-shadow: var(--m-schatten-klein); }
.wcx-prio {
    font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .05em;
    color: var(--m-ink); border: 2px solid var(--m-ink); padding: 5px 11px 4px;
}
.wcx-prio.p-hoch { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-koralle); }
.wcx-prio.p-mittel { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-gelb); }
.wcx-prio.p-tipp { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-lila); }
.wcx-rec-cat { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .05em; color: var(--m-ink-3); }
.wcx-rec-title { font-weight: 700; font-size: 16px; }
.wcx-rec-text { color: var(--m-ink-2); }
.wcx-rec-empty { color: var(--m-ink-2); }

/* Details */
.wcx-details { background: #fff; border: var(--m-kontur) solid var(--m-ink); box-shadow: var(--m-schatten-klein); }
.wcx-details dt { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .05em; color: var(--m-ink-3); }
.wcx-details dd { color: var(--m-ink-2); }
.wcx-details dt, .wcx-details dd { border-top-color: rgba(43, 43, 51, .1); }
.wcx-note { color: var(--m-ink-3); }

/* Abschluss mit Porträt: Kreis mit Koralle-Ring wie Milos Avatar in den Videos */
.wcx-cta {
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(168, 220, 196, .55), rgba(168, 220, 196, 0) 70%),
        linear-gradient(135deg, #FFE7D7, #FFF6EE 60%);
    border: var(--m-kontur) solid var(--m-ink); border-radius: 26px; box-shadow: var(--m-schatten);
}
.wcx-cta h4 { font-weight: 800; font-size: 21px; color: var(--m-ink); letter-spacing: -.01em; }
.wcx-cta p { color: var(--m-ink-2); }
/* Das Bild ist schon schwarz-weiss (mecoffee_sw.jpg). Ohne den Graufilter der
   Hauptdatei bleibt der Ring korallenrot — der Filter färbte ihn mit. */
.wcx-persona-bild { filter: none; border: 4px solid var(--m-koralle); box-shadow: 0 0 0 2.5px var(--m-ink); }
.wcx-persona-bild:hover { filter: none; }
.wcx-persona p.wcx-persona-name { font-weight: 700; color: var(--m-ink); }
.wcx-persona p.wcx-persona-rolle { color: var(--m-ink-3); }
.wcx-persona p.wcx-persona-fliess { color: var(--m-ink-2); }

/* Die Milo-Seite tritt ohne iweb4u als Kontakt auf: keine Abschlusskachel «Wie
   es für Ihre Webseite weitergehen kann» mit Porträt und Termin, kein Termin- und
   Mailweg in der Einladung, im Kaufkasten keine Zeile mit Porträt und Videocall.
   Der Bericht kommt mit Milos Absender (milo.js hängt marke=milo an). Seit dem
   15.10.2026 dieselbe Logik wie auf der Hauptseite: gesperrter PDF-Knopf
   («freischalten»), Kaufkasten und Weg zur Lösungsmappe bleiben — nur wo der
   Knopf oder der Hinweis eine Mail an iweb4u nennt (kein Angebot), nicht.
   milo.js entfernt es; das hier ist die zweite Sicherung. */
.wcx-persona, .wcx-einladung .rb-cta, .wcx-einladung-mail, .wcx-kauf-frage,
a.wcx-rolle[href^="mailto:"] { display: none !important; }
/* Eigene Regel: Ein Browser ohne :has() verwirft sonst die ganze Regel darüber */
.wcx-bericht-hinweis:has(a[href^="mailto:"]) { display: none !important; }

/* Der Kaufkasten (seit 15.10.2026 auch auf der Milo-Seite, dieselbe Logik wie die
   Hauptseite): Karte mit Kontur wie der Kopf, Akzente in Koralle, Häkchen und
   Garantie in Milos Minze. Die Zeile mit Porträt und Videocall fehlt (oben). */
.wcx-kauf {
    --wcx-kauf-gruen: var(--m-minze-text);
    background:
        radial-gradient(560px 260px at 100% 0%, rgba(255, 217, 194, .7), rgba(255, 217, 194, 0) 70%),
        #fff;
    border: var(--m-kontur) solid var(--m-ink); border-radius: 26px;
    box-shadow: var(--m-schatten);
}
.wcx-kauf-kopf { border-bottom-color: rgba(43, 43, 51, .14); }
.wcx-kauf-marke, .wcx-kauf-muster, .wcx-kauf-agb a, .wcx-kauf-pfeil, .wcx-kauf-wechsel { color: var(--m-koralle-text); }
.wcx-kauf-titel, .wcx-kauf-zahl b, .wcx-kauf-preis b, .wcx-kauf-liste b { color: var(--m-ink); }
.wcx-kauf-zahl.s-good b { color: var(--m-minze-text); }
.wcx-kauf-zahl.s-mid b { color: var(--m-gelb-text); }
.wcx-kauf-plus { background: var(--m-gelb); color: var(--m-ink); border: 2px solid var(--m-ink); box-shadow: none; font-weight: 700; }
.wcx-kauf-liste li::before {
    border: 2px solid var(--m-ink);
    background: var(--m-minze-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232B7A5E' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 17px no-repeat;
}
.wcx-kauf-karte { background: var(--m-creme); border: 2px solid var(--m-ink); border-radius: 22px; }
.wcx-kauf-garantie { background: var(--m-minze-hell); border: 2px solid var(--m-minze-text); }
.wcx-kauf-siegel { background-color: var(--m-minze); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--m-minze-text); }
.wcx-kauf-garantie p, .wcx-kauf-liste span { color: var(--m-ink-2); }
.wcx-kauf-zahlarten li { background: #fff; border: 1.5px solid rgba(43, 43, 51, .25); color: var(--m-ink-2); }
.wcx-kauf-vertrauen, .wcx-kauf-agb, .wcx-kauf-preis span { color: var(--m-ink-3); }
/* Der Hinweis über den gesperrten Empfehlungen (Checker 1.65) wie eine Karte von Milo */
.wcx-tor {
    background: radial-gradient(480px 200px at 0% 0%, rgba(255, 217, 194, .7), rgba(255, 217, 194, 0) 70%), #fff;
    border: var(--m-kontur) solid var(--m-ink); border-radius: 26px; box-shadow: var(--m-schatten-klein);
}
.wcx-tor-zeichen { background: var(--m-pfirsich-1); color: var(--m-koralle-text); border: 2px solid var(--m-ink); }
.wcx-tor-garantie { color: var(--m-minze-text); }

/* Massstab */
.wcx-trust { background: #fff; border: var(--m-kontur) solid var(--m-ink); border-radius: 26px; box-shadow: var(--m-schatten-klein); }
.wcx-trust-kicker {
    font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
    color: var(--m-ink); background: var(--m-lila); border: 2px solid var(--m-ink); border-radius: 999px; padding: 4px 12px 3px;
}
.wcx-trust-badge {
    font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .05em;
    background: var(--m-gelb); color: var(--m-ink); border: 2px solid var(--m-ink); box-shadow: none;
}
.wcx-trust h4 { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.wcx-trust-lead { color: var(--m-ink-2); }
.wcx-trust-tab { border-top-color: rgba(43, 43, 51, .14); }
.wcx-trust-tab .wcx-trust-kopf { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .05em; color: var(--m-ink-3); }
.wcx-trust-warn, .wcx-trust-hier { border-top-color: rgba(43, 43, 51, .1); }
.wcx-trust-warn { color: var(--m-ink); font-weight: 600; }
.wcx-trust-hier { color: var(--m-ink-2); }
.wcx-trust-schluss { color: var(--m-ink-2); }
.wcx-trust-link { font-family: var(--font-sans); font-weight: 700; color: var(--m-koralle-text); border-bottom: 2px solid currentColor; }
.wcx-trust-link:hover { color: var(--m-ink); border-bottom-color: var(--m-ink); }
/* Zeile «Massstab · Wichtig»: ohne das Polster der gleichnamigen Spaltenköpfe */
.wcx-trust > .wcx-trust-kopf { padding: 0; text-transform: none; }
@media (max-width: 620px) { .wcx-trust-hier { border-left-color: var(--m-koralle); } }

/* Reiter «Sichtbarkeit» */
.wcx-geo-spin { border: 4px solid var(--m-pfirsich-2); border-top-color: var(--m-koralle); }
.wcx-geo-loadtext { color: var(--m-ink-2); font-weight: 500; }
.wcx-geo-biz { font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.wcx-geo-loc { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; color: var(--m-koralle-text); }
.wcx-geo-note {
    color: var(--m-ink-2); background: #fff;
    border: 2px solid var(--m-ink); border-left: 8px solid var(--m-lila); border-radius: 14px;
}
.wcx-geo-scorecard {
    background:
        radial-gradient(420px 220px at 0% 0%, rgba(163, 180, 230, .45), rgba(163, 180, 230, 0) 70%),
        #fff;
    border: var(--m-kontur) solid var(--m-ink); box-shadow: var(--m-schatten-klein);
}
.wcx-geo-scorelabel { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .05em; color: var(--m-ink-3); }
.wcx-geo-bignum { font-weight: 800; letter-spacing: -.02em; }
.wcx-geo-bignum small { font-family: var(--font-sans); color: var(--m-ink-4); }
.wcx-geo-subtop { color: var(--m-ink-2); }
.wcx-geo-subval { font-family: var(--font-sans); font-weight: 700; }
.wcx-pos { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; color: var(--m-ink); border: 1.5px solid var(--m-ink); }
.wcx-pos-top { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-minze); }
.wcx-pos-mid { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-lila); }
.wcx-pos-low { color: var(--m-ink); border-color: var(--m-ink); background: var(--m-gelb); }
.wcx-pos-none { color: var(--m-ink-3); border-color: rgba(43, 43, 51, .3); background: #fff; }
.wcx-geo-tag { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0; color: var(--m-ink-2); background: var(--m-creme); border: 1.5px solid rgba(43, 43, 51, .25); }
.wcx-geo-qlabel { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .05em; color: var(--m-koralle-text); }
.wcx-geo-q { color: var(--m-ink-2); background: var(--m-creme); border-color: rgba(43, 43, 51, .2); }
.wcx-kw { color: var(--m-ink); background: #fff; border: 2px solid var(--m-ink); font-weight: 600; }
.wcx-kw-x { background: var(--m-koralle-hell); color: var(--m-ink); font-weight: 800; }
.wcx-kw-x:hover { background: var(--m-koralle); color: var(--m-ink); }
.wcx-kw-input { background: var(--m-creme); border: 2px solid var(--m-ink); color: var(--m-ink); font-weight: 500; }
.wcx-kw-input:focus { border-color: var(--m-ink); box-shadow: 0 0 0 4px rgba(242, 120, 106, .35); }
.wcx-kw-addbtn { color: var(--m-ink); background: var(--m-minze); border: 2px solid var(--m-ink); font-weight: 700; }
.wcx-kw-addbtn:hover:not(:disabled) { border-color: var(--m-ink); background: #BDE6D3; }
.wcx-kw-info { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--m-ink-3); }

/* Fenster «Rechtssicher-Paket» und «KI-Beratung»: hell statt dunkel */
.rb-theme-site { --rb-accent: var(--m-minze-text); }
.rb-overlay { background: rgba(43, 43, 51, .55); }
.rb-theme-site .rb-modal, .rb-modal {
    background: #fff; color: var(--m-ink);
    border: var(--m-kontur) solid var(--m-ink); border-radius: 24px;
    box-shadow: 0 30px 70px -20px rgba(43, 43, 51, .55);
    scrollbar-color: rgba(43, 43, 51, .3) transparent;
}
.rb-theme-site .rb-modal::-webkit-scrollbar-thumb { background: rgba(43, 43, 51, .25); border-color: #fff; }
.rb-theme-site .rb-mtitle, .rb-mtitle { color: var(--m-ink); font-weight: 800; }
.rb-theme-site .rb-msub, .rb-msub { color: var(--m-ink-2); }
.rb-theme-site .rb-close { color: var(--m-ink-3); }
.rb-theme-site .rb-close:hover { color: var(--m-ink); }
.rb-theme-site .rb-info, .rb-info {
    background: var(--m-pfirsich-1); background-image: none;
    border: 2px solid var(--m-ink); border-radius: 16px;
}
.rb-theme-site .rb-info-title, .rb-info-title { color: var(--m-ink); font-weight: 700; }
.rb-theme-site .rb-list li, .rb-list li { color: var(--m-ink-2); }
.rb-list li::before { color: var(--m-minze-text); }
.rb-price { color: var(--m-koralle-text); }
.rb-theme-site .rb-note, .rb-note { color: var(--m-ink-3); }
.rb-theme-site .rb-field span { color: var(--m-ink); }
.rb-theme-site .rb-field input, .rb-theme-site .rb-field textarea {
    background: var(--m-creme); border: 2px solid var(--m-ink); color: var(--m-ink); border-radius: 12px;
}
.rb-theme-site .rb-field input:focus, .rb-theme-site .rb-field textarea:focus { border-color: var(--m-ink); box-shadow: 0 0 0 4px rgba(242, 120, 106, .35); }
.rb-theme-site .rb-field input.rb-error { border-color: var(--m-koralle-text); background: #FDEDEA; }
.rb-theme-site .rb-feedback { color: var(--m-koralle-text); }
.rb-theme-site .rb-feedback a, .rb-theme-site .rb-check a { color: var(--m-lila-text); }
.rb-theme-site .rb-check { color: var(--m-ink-2); }
.rb-theme-site .rb-choice-label { color: var(--m-ink); }
.rb-theme-site .rb-choice button { background: #fff; border: 2px solid var(--m-ink); color: var(--m-ink); }
.rb-theme-site .rb-choice button span { color: var(--m-ink-3); }
.rb-theme-site .rb-choice button:hover { border-color: var(--m-ink); background: var(--m-pfirsich-1); }
.rb-theme-site .rb-choice button.rb-on { border-color: var(--m-ink); background: var(--m-minze-hell); box-shadow: inset 0 0 0 1px var(--m-ink); }
.rb-theme-site .rb-cta, .rb-theme-site .rb-submit, .rb-cta, .rb-submit {
    background: var(--m-koralle); color: var(--m-ink);
    border: var(--m-kontur) solid var(--m-ink); box-shadow: 0 4px 0 var(--m-ink);
}
.rb-theme-site .rb-cta:hover, .rb-theme-site .rb-submit:hover, .rb-cta:hover, .rb-submit:hover {
    background: #F4867A; filter: none;
}
.rb-theme-site .rb-success-icon { background: var(--m-minze); color: var(--m-ink); border: 2px solid var(--m-ink); }
.rb-theme-site .rb-rabatt-note.rb-rabatt-ok { color: var(--m-minze-text); }
.rb-theme-site .rb-rabatt-note.rb-rabatt-bad { color: var(--m-koralle-text); }

/* Fenster mit den W3C-Meldungen */
.wcxm-overlay { background: rgba(43, 43, 51, .55); }
.wcxm-box { background: #fff; color: var(--m-ink); border: var(--m-kontur) solid var(--m-ink); box-shadow: 0 30px 70px -20px rgba(43, 43, 51, .55); }
.wcxm-head { border-bottom: 2px solid var(--m-ink); background: var(--m-pfirsich-1); }
.wcxm-title { color: var(--m-ink); font-weight: 800; }
.wcxm-sub { font-family: var(--font-sans); font-weight: 600; letter-spacing: .03em; color: var(--m-ink-3); }
.wcxm-close { color: var(--m-ink-3); }
.wcxm-close:hover { color: var(--m-ink); }
.wcxm-list { scrollbar-color: rgba(43, 43, 51, .3) transparent; }
.wcxm-list::-webkit-scrollbar-thumb { background: rgba(43, 43, 51, .25); border-color: #fff; }
.wcxm-num { font-family: var(--font-sans); font-weight: 700; color: var(--m-ink-3); }
.wcxm-more { color: var(--m-ink-3); border-top-color: rgba(43, 43, 51, .14); }

@media (max-width: 640px) {
    .wcx-dash { scroll-margin-top: 92px; }
    .wcx-tabs { border-radius: 22px; }
    .wcx-head { border-radius: 22px; }
}