/* DGM Stoffwechseltyp Quiz
   Farben und Schriften kommen aus den globalen Elementor Einstellungen,
   sofern vorhanden. Sonst greifen die Ersatzwerte. */

.dgm-quiz{
  /* Farben bewusst NICHT aus Elementor uebernehmen.
     Der globale Elementor Standard fuer Text ist ein mittleres Grau und
     fuer Primaer oft ein Blau. Beides ist fuer diesen Test falsch.
     Die Akzentfarbe laesst sich in den Plugin Einstellungen ueberschreiben,
     die Schriftart wird weiterhin vererbt. */
  --dgm-akzent: #1a5c2e;
  --dgm-akzent-dunkel: color-mix(in srgb, var(--dgm-akzent) 82%, #000);
  --dgm-akzent-hell: color-mix(in srgb, var(--dgm-akzent) 7%, #fff);
  --dgm-akzent-linie: color-mix(in srgb, var(--dgm-akzent) 26%, #fff);

  --dgm-text: #16211c;
  --dgm-grau: color-mix(in srgb, var(--dgm-text) 68%, #fff);
  --dgm-leise: color-mix(in srgb, var(--dgm-text) 52%, #fff);
  --dgm-linie: color-mix(in srgb, var(--dgm-text) 12%, #fff);
  --dgm-flaeche: color-mix(in srgb, var(--dgm-text) 3%, #fff);
  --dgm-weiss: #fff;

  --dgm-warn: #7a4e0c; --dgm-warn-bg: #fdf7ea; --dgm-warn-linie: #e2c992;
  --dgm-stop: #8c2f2f; --dgm-stop-bg: #fbeeee; --dgm-stop-linie: #e5bcbc;
  --dgm-radius: 14px;
  --dgm-schatten: 0 1px 2px rgba(20,30,25,.05), 0 4px 14px rgba(20,30,25,.05);

  font-family: var(--e-global-typography-text-font-family, inherit);
  color: var(--dgm-text);
  max-width: 680px; margin: 0; font-size: 18px; line-height: 1.62;
  -webkit-tap-highlight-color: transparent;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .dgm-quiz{
    --dgm-akzent-dunkel:#134a24; --dgm-akzent-hell:#f1f7f3; --dgm-akzent-linie:#bcd6c5;
    --dgm-grau:#4a4a4a; --dgm-leise:#6e6e6e; --dgm-linie:#e2e6e4; --dgm-flaeche:#f7f9f8;
  }
}
.dgm-quiz *{box-sizing:border-box}
/* Gegen Themes, die p, li oder Ueberschriften global einfaerben.
   :where sorgt dafuer, dass diese Regel keine spaetere Regel im Plugin ueberstimmt. */
.dgm-quiz :where(p,li,h1,h2,h3,h4,td,th,label,strong,b,em,span,button){color:var(--dgm-text)}
/* Viele Themes setzen white-space nowrap auf Buttons. Dann laeuft langer
   Antworttext auf einer Zeile aus der Seite. Hier hart zuruecksetzen. */
.dgm-quiz button,.dgm-quiz a,.dgm-quiz .dgm-check,.dgm-quiz p,.dgm-quiz li,
.dgm-quiz h1,.dgm-quiz h2,.dgm-quiz h3,.dgm-quiz td,.dgm-quiz th,.dgm-quiz label{
  white-space:normal;overflow-wrap:break-word;word-wrap:break-word;text-overflow:clip}
.dgm-quiz{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.dgm-quiz button{max-width:100%}

/* ---------------------------------------------------------- Startbildschirm */
.dgm-start{padding:8px 0 4px}
.dgm-start-titel{font-size:38px;line-height:1.13;letter-spacing:-.03em;font-weight:800;
  margin:0 0 14px;color:var(--dgm-text);
  font-family:var(--e-global-typography-primary-font-family, inherit)}
.dgm-start-sub{font-size:19px;line-height:1.55;color:var(--dgm-grau);margin:0 0 22px;max-width:560px}
.dgm-start-liste{list-style:none;margin:0 0 28px;padding:0}
.dgm-start-liste li{position:relative;padding-left:32px;margin-bottom:12px;font-size:17px;line-height:1.45}
.dgm-start-liste li:before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;
  border-radius:50%;background:var(--dgm-akzent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.dgm-start .dgm-cta{margin-top:4px}
.dgm-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;justify-content:center}
.dgm-trust span{font-size:13.5px;color:var(--dgm-leise);display:flex;align-items:center;gap:7px}
.dgm-trust span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dgm-akzent-linie)}

/* App Modus: waehrend der Test laeuft fuellt er den Bildschirm,
   damit der Text darunter nicht ablenkt. */
.dgm-quiz.dgm-laeuft{min-height:calc(100vh - 190px);display:flex;flex-direction:column}
.dgm-quiz.dgm-laeuft .dgm-main{flex:1}
.dgm-quiz.dgm-laeuft .dgm-fusshinweis{margin-top:auto}
@media(max-width:600px){ .dgm-quiz.dgm-laeuft{min-height:calc(100svh - 150px)} }

/* ---------------------------------------------------------- Fortschritt */
.dgm-bar[hidden]{display:none}
.dgm-bar{height:6px;background:var(--dgm-linie);border-radius:99px;overflow:hidden;margin-bottom:26px}
.dgm-bar i{display:block;height:100%;border-radius:99px;background:var(--dgm-akzent);width:18%;
  transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ---------------------------------------------------------- Typografie */
.dgm-kicker{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dgm-akzent);font-weight:800;margin-bottom:12px;
  background:var(--dgm-akzent-hell);padding:5px 11px;border-radius:99px}
.dgm-quiz h1{font-size:27px;line-height:1.28;margin:0 0 10px;letter-spacing:-.015em;font-weight:800;
  color:var(--dgm-text);font-family:var(--e-global-typography-primary-font-family, inherit)}
.dgm-quiz h2{font-size:22px;line-height:1.32;margin:34px 0 12px;letter-spacing:-.01em;font-weight:800;
  color:var(--dgm-text);font-family:var(--e-global-typography-primary-font-family, inherit)}
.dgm-quiz h3{font-size:17.5px;margin:22px 0 8px;font-weight:700;color:var(--dgm-text)}
.dgm-quiz p{margin:0 0 16px;color:var(--dgm-text)}
.dgm-warum{font-size:15.5px;color:var(--dgm-grau);margin:0 0 20px !important}

/* ---------------------------------------------------------- Antworten */
.dgm-opts{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.dgm-quiz button.dgm-opt{position:relative;appearance:none;text-align:left;background:var(--dgm-weiss);
  border:2px solid var(--dgm-linie);border-radius:var(--dgm-radius);padding:17px 52px 17px 18px;
  font:inherit;font-size:17px;color:var(--dgm-text);cursor:pointer;line-height:1.42;width:100%;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .06s}
.dgm-quiz button.dgm-opt:hover{border-color:var(--dgm-akzent-linie);box-shadow:var(--dgm-schatten)}
.dgm-quiz button.dgm-opt:active{transform:scale(.99)}
.dgm-quiz button.dgm-opt:focus-visible{outline:3px solid var(--dgm-akzent-linie);outline-offset:2px}
.dgm-quiz button.dgm-opt.dgm-sel{border-color:var(--dgm-akzent);background:var(--dgm-akzent-hell)}
.dgm-quiz button.dgm-opt .dgm-sub{display:block;font-size:15px;color:var(--dgm-grau);margin-top:4px}
/* Auswahlkreis rechts */
.dgm-quiz button.dgm-opt:after{content:"";position:absolute;right:17px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;border:2px solid var(--dgm-linie);background:var(--dgm-weiss)}
.dgm-quiz button.dgm-opt.dgm-sel:after{border-color:var(--dgm-akzent);background:var(--dgm-akzent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat}

/* Silhouetten Auswahl */
.dgm-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.dgm-quiz button.dgm-bild{appearance:none;background:var(--dgm-weiss);border:2px solid var(--dgm-linie);
  border-radius:var(--dgm-radius);padding:12px 8px 14px;cursor:pointer;font:inherit;color:var(--dgm-text);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transition:border-color .15s,background .15s,box-shadow .15s}
.dgm-quiz button.dgm-bild:hover{border-color:var(--dgm-akzent-linie);box-shadow:var(--dgm-schatten)}
.dgm-quiz button.dgm-bild.dgm-sel{border-color:var(--dgm-akzent);background:var(--dgm-akzent-hell)}
.dgm-quiz button.dgm-bild img{width:100%;max-width:96px;height:auto;display:block}
.dgm-quiz button.dgm-bild b{font-size:14.5px;font-weight:700;line-height:1.25}
.dgm-quiz button.dgm-bild span{font-size:12.5px;color:var(--dgm-grau);line-height:1.35;
  max-width:150px;text-wrap:balance}

/* Chips */
.dgm-rowlab{font-size:13.5px;font-weight:800;color:var(--dgm-grau);margin:22px 0 9px;
  text-transform:uppercase;letter-spacing:.07em}
.dgm-chips{display:flex;flex-wrap:wrap;gap:9px}
.dgm-quiz button.dgm-chip{appearance:none;background:var(--dgm-weiss);border:2px solid var(--dgm-linie);
  border-radius:99px;padding:11px 18px;font:inherit;font-size:16px;cursor:pointer;color:var(--dgm-text);
  transition:border-color .15s,background .15s}
.dgm-quiz button.dgm-chip:hover{border-color:var(--dgm-akzent-linie)}
.dgm-quiz button.dgm-chip.dgm-sel{border-color:var(--dgm-akzent);background:var(--dgm-akzent-hell);font-weight:700}

/* ---------------------------------------------------------- Knoepfe */
.dgm-quiz .dgm-cta{display:block;width:100%;margin-top:22px;background:var(--dgm-akzent);color:#fff;
  border:0;border-radius:var(--dgm-radius);padding:19px 20px;font:inherit;font-size:18px;font-weight:800;
  cursor:pointer;text-align:center;text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 2px 10px color-mix(in srgb, var(--dgm-akzent) 22%, transparent);
  transition:background .15s,transform .06s}
.dgm-quiz .dgm-cta:hover{background:var(--dgm-akzent-dunkel);color:#fff}
.dgm-quiz .dgm-cta:active{transform:scale(.995)}
.dgm-quiz .dgm-cta[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.dgm-quiz .dgm-cta.dgm-ghost{background:transparent;color:var(--dgm-akzent);
  border:2px solid var(--dgm-akzent-linie);box-shadow:none;margin-top:11px}
.dgm-quiz .dgm-cta.dgm-ghost:hover{background:var(--dgm-akzent-hell);color:var(--dgm-akzent)}
.dgm-quiz .dgm-zurueck{display:inline-block;margin-top:20px;background:none;border:0;
  color:var(--dgm-grau);font:inherit;font-size:15px;cursor:pointer;padding:8px 0;text-decoration:underline}
.dgm-quiz .dgm-zurueck:hover{color:var(--dgm-akzent)}

/* ---------------------------------------------------------- Felder */
.dgm-feld{margin-bottom:16px}
.dgm-feld label{display:block;font-size:15px;font-weight:700;margin-bottom:7px;color:var(--dgm-text)}
.dgm-quiz .dgm-feld input{width:100%;padding:15px 16px;border:2px solid var(--dgm-linie);
  border-radius:12px;font:inherit;font-size:17px;background:var(--dgm-weiss);color:var(--dgm-text)}
.dgm-quiz .dgm-feld input:focus{outline:0;border-color:var(--dgm-akzent)}
.dgm-quiz .dgm-feld input::placeholder{color:var(--dgm-leise)}

.dgm-gruppe{margin-top:24px}
.dgm-gruppe .dgm-gt{font-size:13.5px;font-weight:800;color:var(--dgm-grau);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:10px}
.dgm-check{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;
  border:2px solid var(--dgm-linie);border-radius:12px;margin-bottom:8px;cursor:pointer;
  font-size:16px;line-height:1.4;color:var(--dgm-text);background:var(--dgm-weiss);
  transition:border-color .15s,background .15s}
.dgm-check:hover{border-color:var(--dgm-akzent-linie)}
.dgm-check.dgm-sel{border-color:var(--dgm-akzent);background:var(--dgm-akzent-hell)}
.dgm-check .dgm-box{flex:0 0 22px;width:22px;height:22px;border:2px solid var(--dgm-linie);border-radius:7px;
  margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;
  background:var(--dgm-weiss);font-weight:800}
.dgm-check.dgm-sel .dgm-box{background:var(--dgm-akzent);border-color:var(--dgm-akzent);color:#fff}

/* ---------------------------------------------------------- Zwischenscreen */
.dgm-info{background:var(--dgm-akzent-hell);border:1px solid var(--dgm-akzent-linie);
  border-radius:16px;padding:24px 22px}
.dgm-info p{margin:0;color:var(--dgm-text)}

/* ---------------------------------------------------------- Laden */
.dgm-load{text-align:center;padding:76px 0}
.dgm-spin{width:48px;height:48px;border:4px solid var(--dgm-linie);border-top-color:var(--dgm-akzent);
  border-radius:50%;margin:0 auto 28px;animation:dgmsp 1s linear infinite}
@keyframes dgmsp{to{transform:rotate(360deg)}}
.dgm-loadstep{color:var(--dgm-grau);font-size:16.5px;min-height:26px}

/* ---------------------------------------------------------- Ergebnis */
.dgm-badge{display:inline-block;background:var(--dgm-akzent);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;border-radius:99px}
.dgm-typ{font-size:36px;font-weight:800;letter-spacing:-.03em;margin:14px 0 6px;line-height:1.12;
  color:var(--dgm-text);font-family:var(--e-global-typography-primary-font-family, inherit)}
.dgm-bremszeile{font-size:17.5px;color:var(--dgm-akzent);font-weight:800;margin-bottom:22px;line-height:1.4}
.dgm-belege{background:var(--dgm-flaeche);border-left:4px solid var(--dgm-akzent);
  border-radius:0 12px 12px 0;padding:16px 18px;margin:24px 0}
.dgm-belege ul{margin:0;padding:0;list-style:none}
.dgm-belege li{font-size:16.5px;color:var(--dgm-text);margin:0 0 9px;padding-left:28px;
  position:relative;line-height:1.45}
.dgm-belege li:last-child{margin-bottom:0}
.dgm-belege li:before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;
  background:var(--dgm-akzent);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}

.dgm-karte{border:1px solid var(--dgm-linie);border-radius:16px;padding:22px;margin:24px 0;
  background:var(--dgm-weiss);box-shadow:var(--dgm-schatten)}
.dgm-karte.dgm-stark{border-color:var(--dgm-akzent-linie);background:var(--dgm-akzent-hell);box-shadow:none}
.dgm-karte.dgm-warn{border-color:var(--dgm-warn-linie);background:var(--dgm-warn-bg);box-shadow:none}
.dgm-karte.dgm-stop{border-color:var(--dgm-stop-linie);background:var(--dgm-stop-bg);box-shadow:none}
.dgm-karte h3{margin-top:0}

.dgm-empf{border:2px solid var(--dgm-akzent);border-radius:18px;padding:24px 22px;margin:28px 0;
  background:var(--dgm-akzent-hell)}
.dgm-empf .dgm-empf-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--dgm-akzent);margin-bottom:8px}
.dgm-dauer{font-size:29px;font-weight:800;color:var(--dgm-text);letter-spacing:-.025em;
  margin:0 0 14px;line-height:1.15}
.dgm-dauer em{font-style:normal;color:var(--dgm-akzent)}
.dgm-gruende{margin:0 0 4px;padding:0;list-style:none}
.dgm-gruende li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16.5px;line-height:1.45}
.dgm-gruende li:before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--dgm-akzent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat}

.dgm-tabelle{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* Der Schatten am rechten Rand verschwindet erst, wenn ganz nach rechts
     gescrollt ist. Ohne ihn uebersieht man auf dem Handy die letzte Spalte. */
  background:linear-gradient(to right,var(--dgm-weiss) 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(255,255,255,0),var(--dgm-weiss) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(20,30,25,.16),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(20,30,25,.16),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.dgm-normal{margin:16px 0 0;padding:14px 16px;border:2px solid var(--dgm-akzent-linie);
  border-radius:14px;background:var(--dgm-weiss)}
.dgm-normal-kopf{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dgm-grau);font-weight:800}
.dgm-normal-zahl{margin:4px 0 6px;font-size:30px;font-weight:900;letter-spacing:-.02em;
  color:var(--dgm-akzent);line-height:1.05}
.dgm-normal p{font-size:15.5px;line-height:1.45;margin:0}
.dgm-liefer{margin:18px 0 0;padding:16px 18px;border:2px solid var(--dgm-linie);border-radius:14px;
  background:var(--dgm-weiss)}
.dgm-liefer h3{margin:0 0 10px;font-size:17px;font-weight:800;color:var(--dgm-text)}
.dgm-liefer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.dgm-liefer li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.35;color:var(--dgm-text)}
.dgm-liefer li:before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;
  border-radius:2px;background:var(--dgm-akzent)}
@media(max-width:520px){ .dgm-liefer ul{grid-template-columns:1fr} }

.dgm-sterne{margin:10px 0 0;text-align:center;font-size:14.5px;color:var(--dgm-grau)}
.dgm-sterne strong{color:var(--dgm-text)}

.dgm-ehrlich{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:#fbf7ee;
  border:1px solid #e3d7bd}
.dgm-ehrlich h3{margin:0 0 6px;font-size:16.5px;font-weight:800;color:#6b4e0e}
.dgm-ehrlich p{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:#4a3a12}
.dgm-ehrlich p:last-child{margin-bottom:0}

.dgm-bruecke{margin:20px 0 12px;font-size:18px;line-height:1.45;font-weight:700;color:var(--dgm-text)}
.dgm-mikro{margin:8px 0 0;font-size:13.5px;line-height:1.4;color:var(--dgm-grau);text-align:center}
.dgm-einstieg{margin:22px 0 0;padding:16px 18px;border:1px solid var(--dgm-linie);border-radius:12px;background:var(--dgm-flaeche)}
.dgm-einstieg h3{margin:0 0 8px;font-size:17px;line-height:1.3}
.dgm-einstieg p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--dgm-text)}
.dgm-einstieg .dgm-cta{margin:0}
.dgm-verstanden{margin:26px 0 0}
.dgm-verstanden h2{margin:0 0 10px}
.dgm-verstanden p{margin:0 0 12px;font-size:17px;line-height:1.55}
.dgm-verstanden .dgm-schluss{font-weight:700;color:var(--dgm-text)}
.dgm-hindernis{margin:22px 0 0;padding:16px 18px;border-left:3px solid var(--dgm-akzent,#1a5c2e);background:var(--dgm-flaeche);border-radius:0 12px 12px 0}
.dgm-hindernis h3{margin:0 0 8px;font-size:17px;line-height:1.3}
.dgm-hindernis p{margin:0 0 10px;font-size:15.5px;line-height:1.5}
.dgm-hindernis p:last-child{margin-bottom:0}
.dgm-umfang-zusatz{margin:12px 0 0;font-size:15px;line-height:1.5;font-weight:700;color:var(--dgm-text)}
.dgm-ersetzt{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--dgm-grau)}
.dgm-bausteine{margin:26px 0 0}
.dgm-bausteine h2{margin:0 0 10px}
.dgm-bausteine > p{margin:0 0 14px;font-size:17px;line-height:1.55}
.dgm-bausteine ul{margin:0;padding:0;list-style:none}
.dgm-bausteine li{margin:0 0 12px;padding:0 0 0 16px;position:relative;font-size:16px;line-height:1.5}
.dgm-bausteine li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--dgm-akzent,#1a5c2e)}
.dgm-traum{margin:24px 0 0;padding:18px 20px;border-radius:14px;background:var(--dgm-flaeche)}
.dgm-traum p{margin:0 0 12px;font-size:17px;line-height:1.6}
.dgm-traum p:last-child{margin-bottom:0}
.dgm-traum-moment{font-weight:700;color:var(--dgm-text)}
@media (max-width:430px){
.dgm-bausteine li{font-size:15px}
.dgm-bausteine > p,.dgm-traum p{font-size:16px}
.dgm-traum{padding:15px 15px}
}
.dgm-testfahne{margin:0 0 14px;padding:9px 12px;border-radius:8px;background:#fff4d6;
  border:1px solid #e0c375;color:#6b4e0e;font-size:13.5px;font-weight:700;line-height:1.35}
.dgm-gesamt{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--dgm-linie);
  font-size:15px;line-height:1.45;color:var(--dgm-text)}
.dgm-erfahrung{margin:14px 0 0;font-size:16px;line-height:1.45;color:var(--dgm-text)}
.dgm-erfahrung strong{color:var(--dgm-akzent);font-weight:800}
.dgm-wischhinweis{display:none;font-size:12.5px;color:var(--dgm-grau);margin-top:6px}
@media (max-width:560px){ .dgm-wischhinweis{display:block} }
.dgm-quiz table.dgm-vgl{width:100%;min-width:340px;border-collapse:collapse;font-size:15.5px}
.dgm-quiz table.dgm-vgl th,.dgm-quiz table.dgm-vgl td{padding:11px 8px;
  border-bottom:1px solid var(--dgm-linie);text-align:left;color:var(--dgm-text)}
.dgm-quiz table.dgm-vgl th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dgm-grau);font-weight:800}
.dgm-quiz table.dgm-vgl tr.dgm-top td{background:var(--dgm-akzent-hell);font-weight:700}
.dgm-quiz table.dgm-vgl tr.dgm-top td:first-child{color:var(--dgm-akzent);border-radius:8px 0 0 8px}
.dgm-quiz table.dgm-vgl tr.dgm-top td:last-child{border-radius:0 8px 8px 0}

/* Sperre fuer den vollstaendigen Bericht */
.dgm-sperre{border:2px dashed var(--dgm-akzent-linie);border-radius:18px;padding:24px 22px;margin:30px 0;
  background:var(--dgm-flaeche)}
.dgm-sperre h3{margin:0 0 6px;font-size:20px}
.dgm-sperre .dgm-liste{margin:14px 0 18px;padding:0;list-style:none}
.dgm-sperre .dgm-liste li{position:relative;padding-left:26px;margin-bottom:9px;font-size:16px;
  line-height:1.4;color:var(--dgm-text)}
.dgm-sperre .dgm-liste li:before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--dgm-akzent)}

.dgm-klein{font-size:15px;color:var(--dgm-grau);line-height:1.55}
.dgm-mini{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--dgm-grau);
  line-height:1.45;cursor:pointer}
.dgm-mini input{margin-top:4px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--dgm-akzent)}
.dgm-hr{height:1px;background:var(--dgm-linie);margin:34px 0}
.dgm-pdflink{font-size:15px;color:var(--dgm-grau);text-decoration:underline;cursor:pointer}
.dgm-pdflink:hover{color:var(--dgm-akzent)}
.dgm-mailinfo{font-size:15px;margin-top:12px}
.dgm-mailinfo.dgm-ok{color:var(--dgm-akzent);font-weight:700}
.dgm-mailinfo.dgm-fehler{color:var(--dgm-stop);font-weight:700}
.dgm-fehlerzeile{color:var(--dgm-stop);font-size:15px;margin-top:10px;font-weight:600}
.dgm-fusshinweis{font-size:13.5px;color:var(--dgm-leise);margin:32px 0 0;padding-top:16px;
  border-top:1px solid var(--dgm-linie);line-height:1.5}
.dgm-fusshinweis a{color:var(--dgm-leise);text-decoration:underline}

@media(max-width:345px){
  .dgm-start-titel{font-size:26px}
}
@media(max-width:430px){
  /* Drei Karten nebeneinander lassen auf einem Telefon nur noch Schriftgroessen
     zu, die niemand mehr liest, ausgerechnet bei der Frage, die den Koerpertyp
     bestimmt. Deshalb quer stapeln: Silhouette links, Beschriftung rechts. */
  .dgm-bilder{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .dgm-quiz button.dgm-bild{display:grid;grid-template-columns:66px 1fr;
    align-items:center;gap:15px;text-align:left;padding:13px 15px}
  .dgm-quiz button.dgm-bild img{max-width:66px;grid-row:1 / span 2}
  .dgm-quiz button.dgm-bild b{font-size:16.5px;align-self:end}
  /* max-width und balance stammen aus dem dreispaltigen Fall und erzeugen quer
     gestapelt unnoetige Umbrueche mitten im Satz. */
  .dgm-quiz button.dgm-bild span{font-size:13.5px;align-self:start;margin-top:3px;
    max-width:none;text-wrap:pretty}
  .dgm-quiz{font-size:17px}
  .dgm-quiz button.dgm-opt{padding:15px 44px 15px 15px}
  .dgm-quiz button.dgm-opt:after{right:13px;width:22px;height:22px}
  .dgm-belege{padding:14px 15px}
  .dgm-belege li{font-size:16px;padding-left:26px}
  .dgm-karte,.dgm-empf,.dgm-sperre{padding:18px 16px}
  .dgm-gruende li,.dgm-sperre .dgm-liste li{font-size:16px}
  .dgm-trust{gap:6px 14px}
  .dgm-trust span{font-size:12.5px}
  .dgm-start-titel{font-size:29px}
  .dgm-start-sub{font-size:17px}
  .dgm-start-liste li{font-size:16px}
  .dgm-quiz h1{font-size:23px}
  .dgm-quiz h2{font-size:20px}
  .dgm-typ{font-size:29px}
  .dgm-dauer{font-size:25px}
  .dgm-quiz table.dgm-vgl{font-size:14px}
  .dgm-quiz table.dgm-vgl th,.dgm-quiz table.dgm-vgl td{padding:9px 5px}
}

/* Klartext ganz oben im Ergebnis. Gleiche Stimme wie die Angebotsseite. */
.dgm-klartext{font-size:26px;line-height:1.25;font-weight:700;margin:10px 0 10px;}
.dgm-klartext-text{font-size:17px;line-height:1.65;margin:0 0 18px;}
@media(max-width:480px){.dgm-klartext{font-size:22px;}}

/* Fassung d, Aufbau eines Advertorials. */
.dgm-bild{margin:22px 0;padding:0;}
.dgm-bild img{display:block;width:100%;height:auto;border-radius:12px;}
.dgm-bild figcaption{font-size:12px;color:#6b6357;font-style:italic;text-align:center;margin-top:6px;}
.dgm-plan{counter-reset:dgmplan;list-style:none;padding:0;margin:18px 0;}
.dgm-plan li{counter-increment:dgmplan;position:relative;padding:12px 0 12px 46px;border-bottom:1px solid #e6e6e6;}
.dgm-plan li:before{content:counter(dgmplan);position:absolute;left:0;top:11px;width:30px;height:30px;border-radius:50%;
  background:var(--dgm-akzent,#1a5c2e);color:#fff;text-align:center;line-height:30px;font-weight:800;font-size:15px;}
.dgm-grenze{border-left:4px solid #c9a03a;background:#fbf3e8;border-radius:0 12px 12px 0;padding:14px 18px;margin:22px 0;}
.dgm-grenze h3{margin-top:0;}
.dgm-grenze p:last-child{margin-bottom:0;}

/* Bausteine aus dem Advertorial Aufbau. */
.dgm-gegner{margin:4px 0 14px;}
.dgm-gegner-name{display:block;font-family:Georgia,serif;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#c41e3a;}
.dgm-gegner-zeile{display:block;font-size:15px;color:#6b6357;margin-top:2px;}
.dgm-schleifen{border:1px solid #e6e6e6;border-radius:12px;padding:14px 18px;margin:20px 0;background:#fafafa;}
.dgm-schleifen h3{margin-top:0;font-size:17px;}
.dgm-schleifen ul{margin:0;padding-left:20px;}
.dgm-schleifen li{margin:6px 0;}
.dgm-test{border:2px solid var(--dgm-akzent,#1a5c2e);border-radius:12px;padding:16px 18px;margin:22px 0;}
.dgm-test h3{margin-top:0;}
.dgm-testliste{margin:10px 0;padding-left:20px;}
.dgm-testliste li{margin:5px 0;}
.dgm-zwischen{background:#f4f6f9;border-radius:12px;padding:14px 18px;margin:22px 0;}
.dgm-zwischen h3{margin-top:0;font-size:17px;}
.dgm-zwischen ul{margin:0;padding-left:20px;}
.dgm-zwischen li{margin:6px 0;}
.dgm-waage{margin:22px 0;}
.dgm-waage-spalten{display:flex;gap:14px;flex-wrap:wrap;}
.dgm-waage-spalten>div{flex:1 1 240px;border:1px solid #e6e6e6;border-radius:12px;padding:12px 16px;}
.dgm-waage h4{margin:0 0 6px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;}
.dgm-pro h4{color:#7d9e1e;}
.dgm-contra h4{color:#c41e3a;}
.dgm-waage ul{margin:0;padding-left:18px;}
.dgm-waage li{margin:5px 0;font-size:15px;}
.dgm-redaktion,.dgm-quellen{border-top:1px solid #e6e6e6;padding-top:12px;margin-top:20px;font-size:14px;color:#6b6357;}
.dgm-redaktion h3,.dgm-quellen h3{font-size:15px;margin:0 0 6px;}
.dgm-quellen ol{margin:0;padding-left:20px;}
.dgm-sterne{text-align:center;font-weight:700;color:#0f1b2d;margin:0 0 14px;}
.dgm-sterne span{color:#c9a03a;font-size:20px;letter-spacing:2px;}
.dgm-stimme{border:1px solid #e6e6e6;border-radius:12px;padding:12px 14px;margin:10px 0;background:#fff;}
.dgm-stimme-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dgm-stimme .dgm-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#2b6cb0;color:#fff;font-weight:700;font-size:13px;text-align:center;line-height:34px;}
.dgm-stimme .dgm-nm{font-weight:700;color:#0f1b2d;font-size:15px;}
.dgm-stimme .dgm-vf{font-size:11px;color:#7d9e1e;font-weight:700;}
.dgm-stimme .dgm-st{color:#c9a03a;font-size:13px;letter-spacing:1px;margin:4px 0 2px;}
.dgm-stimme p{margin:0;font-size:15px;}