/* erechnung-wegweiser.de */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-latin-ext-italic.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-latin-italic.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://erechnung-wegweiser.de/assets/fonts/source-serif-4-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;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-process-yellow: #edbb00;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  --color-yellow-tint: color-mix(in srgb, var(--color-process-yellow) 45%, var(--color-bg));
  --color-auf-magenta: #fff;       
  --color-yellow-soft: color-mix(in srgb, var(--color-process-yellow) 38%, var(--color-bg));

  --font-body: "Source Serif 4", Georgia, serif;
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fw-regular: 400;
  --fw-bold: 600;

  --fs-h1: clamp(28px, 2.2vw + 20px, 62px);
  --fs-h2: clamp(30px, 2vw + 16px, 44px);
  --fs-question: clamp(21px, 1vw + 16px, 29px);
  --fs-result-big: clamp(48px, 5vw + 20px, 88px);
  --fs-result-title: clamp(20px, 0.6vw + 16px, 25px);
  --fs-lead: clamp(16px, 0.4vw + 14px, 19px);
  --fs-body: 16.5px;
  --fs-answer: clamp(17px, 0.3vw + 15px, 19px);
  --fs-small: 14px;
  --fs-micro: 13.5px;
  --lh-tight: 1.02;
  --lh-head: 1.16;
  --lh-body: 1.5;
  --ls-display: -0.035em;
  --ls-head: -0.025em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 34px; --space-10: 48px; --space-12: 64px;
  --section-gap: 110px;
  --page-max: 1240px;
  --page-pad: 24px;
  --lese: 760px;               

  --radius-pill: 999px;
  --radius-sm: 18px;
  --radius-md: 26px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-card: 44px;
  --radius-footer: 48px 48px 0 0;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --shadow-quiz: 0 30px 60px -20px color-mix(in srgb, var(--color-accent-900) 35%, transparent), var(--shadow-sm);
  --shadow-lift: 0 12px 24px -10px color-mix(in srgb, var(--color-text) 30%, transparent);

  --ease-bounce: cubic-bezier(.3, 1.6, .5, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-blob: cubic-bezier(.3, 1.2, .4, 1);
  --dur-fast: .18s; --dur: .25s; --dur-slow: .5s; --dur-blob-move: 1.4s;

  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none' stroke='%23444141' stroke-width='16' stroke-linecap='round'%3E%3Ccircle cx='128' cy='128' r='96' fill='%23444141' fill-opacity='.15'/%3E%3Cpath d='M128 120v56'/%3E%3Cpath d='M128 84v0' stroke-width='24'/%3E%3C/g%3E%3C/svg%3E");
  --ico-check-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40 136l56 56L216 72' fill='none' stroke='%23f3f2f2' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-x-tinte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M76 76l104 104M180 76L76 180' fill='none' stroke='%23444141' stroke-width='26' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-oui-scheibe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23006786'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23f3f2f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-non-scheibe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.8' fill='none' stroke='%239b9797' stroke-width='2' stroke-dasharray='3 2.6'/%3E%3Cpath d='M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8' fill='none' stroke='%23444141' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-arrow-tinte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40 128h176M144 56l72 72-72 72' fill='none' stroke='%230a303e' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes blob  { 0%,100% { border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%; } 33% { border-radius: 60% 40% 35% 65% / 55% 62% 38% 45%; } 66% { border-radius: 38% 62% 55% 45% / 62% 38% 58% 42%; } }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(34px,-28px) rotate(14deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pop   { 0% { transform: scale(.7); opacity: 0; } 65% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes rise  { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wg-root {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.wg-root [hidden] { display: none !important; }

.wg-root h1, .wg-root h2, .wg-root h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
}
.wg-root p { margin: 0; text-wrap: pretty; }
.wg-root img { max-width: 100%; height: auto; }

.wg-root a { color: var(--color-accent-700); text-underline-offset: 3px; }
.wg-root a:hover { color: var(--color-accent-800); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wg-root button { font-family: inherit; }

time, .prix, .echeance-date, .frist-karte-count, .entree-datum,
.wg-ergebnis__datum, .wg-minirechner__wert { font-variant-numeric: tabular-nums; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wg-ico { width: 1em; height: 1em; flex: none; }

.ico {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  vertical-align: -3px;
}

.wg-visuell-versteckt {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saut-contenu { position: absolute; left: -9999px; }
.saut-contenu:focus {
  left: 16px;
  top: 12px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 600;
}

.a-verifier {
  background: var(--color-yellow-tint);
  box-shadow: 0 0 0 2px var(--color-accent-2-600);
  border-radius: 6px;
}

.wg-kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 16px 0;
}

.wg-insel {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-sm);
}

.wg-root .wg-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.wg-logo__zeichen { flex: none; }
.wg-logo__c { fill: var(--color-accent-400); mix-blend-mode: multiply; }
.wg-logo__m { fill: var(--color-accent-2-400); mix-blend-mode: multiply; }
.wg-logo__y { fill: var(--color-process-yellow); mix-blend-mode: multiply; }
.wg-logo__name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

.wg-nav { margin-left: 12px; }
.wg-rubriken { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

.wg-root .wg-rubrik__knopf {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}
.wg-root .wg-rubrik__knopf:hover,
.wg-rubrik.is-offen .wg-rubrik__knopf { background: var(--color-accent-100); color: var(--color-text); }
.wg-rubrik--aktiv .wg-rubrik__knopf { font-weight: 600; }
.wg-caret { width: 12px; height: 12px; transition: transform .25s; }
.wg-rubrik.is-offen .wg-caret { transform: rotate(180deg); }

.wg-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 6px 24px 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s .2s;
}
.wg-mega__panel {
  max-width: 1192px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  padding: 26px;
  border-radius: 36px;
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
html:not(.wg-js) .wg-rubrik:hover .wg-mega,
html:not(.wg-js) .wg-rubrik:focus-within .wg-mega,
.wg-rubrik.is-offen .wg-mega {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
html:not(.wg-js) .wg-rubrik:hover .wg-mega__panel,
html:not(.wg-js) .wg-rubrik:focus-within .wg-mega__panel,
.wg-rubrik.is-offen .wg-mega__panel { opacity: 1; transform: none; }

.wg-mega__haupt { display: flex; flex-direction: column; gap: 12px; }
.wg-root .wg-mega__intro { padding-left: 14px; font-size: 14px; color: var(--color-neutral-700); }
.wg-mega__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wg-root .wg-mega__liste a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 20px;
  color: var(--color-text);
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.wg-root .wg-mega__liste a:hover,
.wg-root .wg-mega__liste a:focus-visible { background: var(--color-accent-100); transform: translateX(3px); color: var(--color-text); }
.wg-root .wg-mega__liste a[aria-current="page"] { background: var(--color-bg); }
.wg-mega__titel { font-size: 17px; font-weight: 600; line-height: 1.25; }
.wg-mega__beschr { font-size: 14px; line-height: 1.35; color: var(--color-neutral-700); }

.wg-mega__test {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 28px;
  background: var(--color-process-yellow);
  color: var(--color-text);
}
.wg-mega__klecks {
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-accent-2-400);
  mix-blend-mode: multiply;
}
.wg-mega__test > span:not(.wg-mega__klecks), .wg-mega__test .wg-knopf { position: relative; }
.wg-mega__kicker { font-size: 13.5px; font-weight: 600; }
.wg-mega__frage { font-size: 23px; font-weight: 600; line-height: 1.15; }
.wg-mega__satz { font-size: 15px; line-height: 1.4; }
.wg-mega__test .wg-knopf { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 18px; font-size: 15px; }

.wg-werkzeug { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.wg-root .wg-rund {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.wg-root .wg-rund:hover { background: var(--color-accent-100); color: var(--color-text); }
.wg-rund .wg-ico { width: 19px; height: 19px; }

.wg-root .wg-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease-bounce);
}
.wg-root .wg-knopf--dunkel,
.wg-root .wg-knopf--dunkel:hover { background: var(--color-text); color: var(--color-bg); }
.wg-root .wg-knopf:hover { transform: scale(1.05); }
.wg-knopf .wg-ico { width: 16px; height: 16px; }

.wg-root .wg-themen {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15.5px;
  text-decoration: none;
  white-space: nowrap;
}
.wg-themen .wg-ico { width: 18px; height: 18px; }

.wg-daumenleiste { display: none; }

.wg-sheet, .wg-suche { position: fixed; inset: 0; z-index: 60; }
.wg-sheet__fond, .wg-suche__fond {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 35%, transparent);
}
.wg-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 520px);
  max-height: 82vh;
  margin: 0 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 24px;
  border-radius: 36px 36px 0 0;
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-lg);
  animation: rise .25s ease-out;
}
.wg-sheet__griff {
  width: 48px;
  height: 6px;
  margin: 4px auto 12px;
  border-radius: 99px;
  background: var(--color-neutral-400);
}
.wg-sheet__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding-left: 8px;
}
.wg-sheet__ort { font-size: 13.5px; color: var(--color-neutral-700); }
.wg-sheet__gruppe { margin-bottom: 4px; border-radius: var(--radius-md); }
.wg-sheet__gruppe[open] { background: var(--color-bg); }
.wg-sheet__gruppe summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.wg-sheet__gruppe summary::-webkit-details-marker { display: none; }
.wg-sheet__gruppe summary .wg-caret { width: 16px; height: 16px; }
.wg-sheet__gruppe[open] summary .wg-caret { transform: rotate(180deg); }
.wg-sheet__gruppe ul { margin: 0; padding: 0 6px 10px; list-style: none; }
.wg-root .wg-sheet__gruppe a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}
.wg-root .wg-sheet__gruppe a:hover { background: var(--color-accent-100); }
.wg-root .wg-sheet__gruppe a[aria-current="page"] { background: var(--color-accent-200); }
.wg-sheet__titel { font-size: 16px; }
.wg-sheet__beschr { font-size: 13.5px; color: var(--color-neutral-700); }

.wg-suche__panel {
  position: absolute;
  top: 96px;
  left: 12px;
  right: 12px;
  max-width: 600px;
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-lg);
  animation: rise .2s ease-out;
}
.wg-suche__feld {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 8px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}
.wg-suche__feld:focus-within { box-shadow: 0 0 0 2px var(--color-accent); }
.wg-suche__feld > .wg-ico { width: 19px; height: 19px; color: var(--color-neutral-700); }
.wg-root .wg-suche__feld input[type="search"] {
  flex: 1;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text);
  font: inherit;
  font-size: 17px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.wg-root .wg-suche__esc {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-200);
  color: var(--color-text);
  font-size: 12.5px;
  cursor: pointer;
}
.wg-suche__treffer {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  margin: 0;
  padding: 6px 0 0;
  overflow: auto;
  list-style: none;
}
.wg-root .wg-suche__treffer a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 20px;
  color: var(--color-text);
  text-decoration: none;
}
.wg-root .wg-suche__treffer a:hover,
.wg-root .wg-suche__treffer a:focus-visible { background: var(--color-accent-100); color: var(--color-text); }
.wg-suche__text { display: flex; flex-direction: column; min-width: 0; }
.wg-suche__titel { font-size: 16px; font-weight: 600; }
.wg-suche__beschr { font-size: 13.5px; color: var(--color-neutral-700); }
.wg-suche__rubrik { font-size: 13px; color: var(--color-neutral-700); white-space: nowrap; }
.wg-root .wg-suche__leer { padding: 16px 14px; font-size: 15px; color: var(--color-neutral-800); }
.wg-root .wg-suche__hinweis { padding: 8px 14px 2px; font-size: 12.5px; color: var(--color-neutral-700); }

html.wg-calque-offen { overflow: hidden; }

.wg-main {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--page-pad) 0;
}

.wg-seitenkopf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--lese);
  margin: 12px auto 28px;
}

.fil-ariane { font-size: 14px; color: var(--color-neutral-700); }
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fil-ariane li + li::before { content: "/"; margin-right: 8px; color: var(--color-neutral-500); }
.wg-root .fil-ariane a { color: var(--color-neutral-700); text-decoration: underline; text-decoration-color: var(--color-neutral-400); }
.wg-root .fil-ariane a:hover { color: var(--color-text); }
.fil-ariane [aria-current="page"] { color: var(--color-text); }

.bandeau-fraicheur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  line-height: 1.3;
}
.bandeau-fraicheur > span {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: pre-wrap;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  color: var(--color-text);
}
.bandeau-fraicheur .wg-ico { width: 16px; height: 16px; margin-right: 8px; color: var(--color-accent-700); }
.bandeau-fraicheur .signature { padding-left: 14px; color: var(--color-neutral-800); }

.wg-pied {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: var(--section-gap);
  border-radius: var(--radius-footer);
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}
.wg-pied__klecks { position: absolute; border-radius: 50%; mix-blend-mode: multiply; pointer-events: none; }
.wg-pied__klecks--m { right: -80px; bottom: -120px; width: 360px; height: 360px; background: var(--color-accent-2-300); }
.wg-pied__klecks--y { right: 140px; bottom: -160px; width: 300px; height: 300px; background: var(--color-process-yellow); opacity: .7; }
.wg-pied__plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 24px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 64px var(--page-pad) 32px;
}
.wg-root .wg-pied__titel { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; }
.wg-pied__spalte ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wg-root .wg-pied a { font-size: 14.5px; line-height: 1.35; color: var(--color-accent-900); text-decoration: none; }
.wg-root .wg-pied a:hover { color: var(--color-accent-900); text-decoration: underline; }
.wg-pied__fuss {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) 36px;
  font-size: 13.5px;
}
.wg-pied__cookies {
  font: inherit;
  color: var(--color-accent-900);
  background: none;
  border: 0;
  padding: 0;
  min-height: 24px;
  text-decoration: underline;
  cursor: pointer;
}
.wg-pied__cookies:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }

.wg-weiter {
  max-width: var(--lese);
  margin: 56px auto 0;
}
.wg-root .wg-weiter__titel { margin-bottom: 16px; font-size: 30px; letter-spacing: var(--ls-head); line-height: 1.1; }
.wg-weiter__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wg-root .wg-weiter__karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .25s var(--ease-bounce);
}
.wg-root .wg-weiter__karte:hover { transform: translateY(-3px); }
.wg-root .wg-weiter__karte--1,
.wg-root .wg-weiter__karte--1:hover { background: var(--color-accent-2-600); color: var(--color-auf-magenta); }
.wg-root .wg-weiter__karte--2,
.wg-root .wg-weiter__karte--2:hover { background: var(--color-accent-200); color: var(--color-accent-900); }
.wg-weiter__karte--1::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-process-yellow);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.wg-weiter__ico { width: 28px; height: 28px; }
.wg-weiter__name { font-size: 21px; font-weight: 600; line-height: 1.2; }
.wg-weiter__text { font-size: 15.5px; line-height: 1.4; }
.wg-weiter__los { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 600; }
.wg-weiter__los .wg-ico { width: 15px; height: 15px; }

.article {
  max-width: var(--lese);
  margin: 0 auto;
  overflow-wrap: break-word;
}
.wg-root :where(.article) h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 2.4vw + 16px, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.wg-root .article .chapo,
.chapo {
  margin: 0 0 28px;
  font-size: clamp(18px, 0.5vw + 15px, 21px);
  line-height: 1.42;
  color: var(--color-neutral-900);
}
.wg-root :where(.article) h2 {
  margin: 52px 0 14px;
  font-size: clamp(25px, 1vw + 18px, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.wg-root :where(.article) h3 {
  margin: 30px 0 8px;
  font-size: clamp(19px, 0.4vw + 16px, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wg-root :where(.article) p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; }
.article p, .article li, .article td, .article dd { hyphens: auto; -webkit-hyphens: auto; }
.wg-root :where(.article) ul,
.wg-root :where(.article) ol { margin: 0 0 18px; padding-left: 24px; font-size: 17px; line-height: 1.55; }
.wg-root :where(.article) li { margin-bottom: 8px; }
.article li::marker { color: var(--color-accent-700); font-weight: 600; }
.article strong { font-weight: 600; }
.article em { font-style: italic; }
.wg-root :where(.article) a { color: var(--color-accent-700); text-decoration: underline; text-decoration-thickness: 1px; }
.wg-root :where(.article) a:hover { color: var(--color-accent-800); }
.article code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--color-neutral-200);
  font-family: var(--font-code);
  font-size: .86em;
}

.wg-root .etiquette {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-neutral-700);
}
.wg-root .meta { font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); }

.ref-loi {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-yellow-tint);
  color: var(--color-text);
  font-size: .86em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.wg-root .source-bloc {
  display: grid;
  gap: 2px;
  margin: 32px 0;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  font-size: 15px;
  line-height: 1.5;
}
.source-bloc dt { font-weight: 600; font-size: 14px; color: var(--color-text); }
.source-bloc dt:not(:first-child) { margin-top: 12px; }
.source-bloc dd { margin: 0; color: var(--color-neutral-800); overflow-wrap: anywhere; }

.wg-root .article blockquote,
.wg-root .article .checker-zitat {
  margin: 24px 0 28px;
  padding: 24px 28px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-yellow-soft);
  color: var(--color-text);
  font-style: normal;
}
.wg-root .article blockquote p {
  margin: 0 0 10px;
  font-size: clamp(18px, 0.4vw + 15.5px, 21px);
  font-style: italic;
  line-height: 1.45;
}
.wg-root .article blockquote p:last-child { margin-bottom: 0; }
.wg-root .article blockquote .meta { font-size: 14px; font-style: normal; color: var(--color-neutral-800); }
.wg-root .article blockquote .ref-loi { background: var(--color-bg); }

.wg-root .empfehlung-marke {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: .15em;
  color: var(--color-accent-700);
  white-space: nowrap;
}

.wg-root .lien-suite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 20px 14px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-200);
  color: var(--color-accent-900);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .25s var(--ease-bounce), background .2s;
}
.wg-root .lien-suite:hover { background: var(--color-accent-300); color: var(--color-accent-900); transform: translateX(3px); }
.lien-suite .ico { width: 18px; height: 18px; transition: transform .25s var(--ease-bounce); }
.lien-suite:hover .ico { transform: translateX(3px); }
.wg-root :where(.article) p > .lien-suite { margin: 0; }
.wg-root :where(.article) p:has(> .lien-suite) { margin-bottom: 10px; }

.wg-root .bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease-bounce);
}
.wg-root .bouton:hover { background: var(--color-text); color: var(--color-bg); transform: scale(1.05); }
.bouton-note { font-size: 14px; color: var(--color-neutral-700); }

.frage-hilfe { font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); }
.wg-root .article .frage-hilfe { font-size: 15px; }

.section-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.wg-root .section-intro { margin-top: 8px; font-size: 16.5px; color: var(--color-neutral-800); }

.surligne-vigueur, .surligne-expire, .surligne-discussion { font-size: 13.5px; }

.wg-root .une-rectif {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--color-accent-2-100);
  font-size: 15.5px;
}

.wg-root .entree-protokoll {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 24px;
  margin: 0 0 10px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.entree-tete { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wg-root .entree-datum { margin: 0; font-size: 17px; font-weight: 600; }
.wg-root .entree-typ {
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-800);
}
.wg-root .entree-protokoll h3 { margin: 0 0 8px; font-size: 18.5px; }
.wg-root .entree-protokoll p { font-size: 16px; }
.wg-root .entree-protokoll p:last-child { margin-bottom: 0; }

.wg-root .tableau-anbieter {
  width: 100%;
  margin: 8px 0 12px;
  padding: 10px 12px 12px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0 6px;
  border-radius: var(--radius-xl);
  background: var(--color-neutral-100);
  font-size: 16px;
  line-height: 1.4;
}
.wg-root .tableau-anbieter caption {
  caption-side: top;
  padding: 0 4px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  color: var(--color-neutral-700);
}
.wg-root .tableau-anbieter th {
  padding: 4px 16px 2px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 400;
  text-align: left;
  vertical-align: bottom;
  color: var(--color-neutral-700);
}
.wg-root .tableau-anbieter td {
  padding: 12px 16px;
  border: 0;
  background: var(--color-bg);
  vertical-align: middle;
}
.wg-root .tableau-anbieter td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.wg-root .tableau-anbieter td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tableau-anbieter tbody tr { transition: transform .2s; }
.tableau-anbieter tbody tr:hover { transform: translateX(4px); }

.nom-anbieter { font-size: 17px; font-weight: 600; }
.wg-root .nom-anbieter a { color: var(--color-text); text-decoration: none; }
.wg-root .nom-anbieter a:hover { color: var(--color-accent-700); text-decoration: underline; }
.wg-root .cellule-prix { display: none; }
.wg-root .nom-anbieter, .wg-root .tableau-anbieter th { hyphens: manual; -webkit-hyphens: manual; }

td.prix { font-weight: 600; }
.wg-root .tableau-anbieter th { overflow-wrap: anywhere; }
span.prix {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-200);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
span.prix--gratis { background: var(--color-process-yellow); }
.convient { color: var(--color-neutral-800); }

.oui, .non {
  padding-left: 48px !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 24px 24px !important;
}
.wg-root .tableau-anbieter td.oui { background-image: var(--ico-oui-scheibe); }
.wg-root .tableau-anbieter td.non { background-image: var(--ico-non-scheibe); }
.non { color: var(--color-text); }

.wg-root .tableau-anbieter a[rel~="sponsored"] {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wg-root .tableau-anbieter a[rel~="sponsored"]:hover { background: var(--color-neutral-900); color: var(--color-bg); }

.wg-root .tableau-note {
  margin: 0 0 24px;
  padding-left: 26px;
  background: var(--ico-info) no-repeat 0 3px / 17px 17px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-800);
}
.tableau-note em { color: var(--color-text); }

.echeance {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease-bounce);
}
.echeance:hover { transform: translateY(-4px); }
.echeance[data-statut="vigueur"] { background: var(--color-accent-700); color: var(--color-bg); }
.echeance[data-statut="expire"] { background: var(--color-accent-2-600); color: var(--color-auf-magenta); }
.echeance[data-statut="discussion"] { background: transparent; border: 2px dashed var(--color-neutral-500); }
.wg-frist__balken { display: block; height: 14px; border-radius: var(--radius-pill); background: var(--color-bg); }
.echeance[data-statut="expire"] .wg-frist__balken {
  background: repeating-linear-gradient(135deg, var(--color-bg) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1.5px var(--color-bg);
}
.echeance[data-statut="discussion"] .wg-frist__balken { display: none; }
.wg-root .echeance-date { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: inherit; }
.echeance-date .incertain { font-size: .7em; }
.wg-root .echeance h3 { min-height: 44px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.35; color: inherit; }
.wg-root .frist-karte-count { margin: 0; font-size: 18px; font-weight: 600; line-height: 1; }
.frist-karte-count strong { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.wg-root .echeance-refs { margin: 0; font-size: 13.5px; line-height: 1.45; }
.echeance .ref-loi { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.wg-root .wg-frist__notiz { margin: 0; font-size: 13.5px; line-height: 1.4; }
.wg-root .echeance-statut {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: auto 0 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
}
.echeance-statut .wg-ico { width: 14px; height: 14px; }
.echeance[data-statut="vigueur"] .echeance-statut { background: var(--color-bg); color: var(--color-accent-900); }
.echeance[data-statut="expire"] .echeance-statut { background: var(--color-bg); color: var(--color-accent-2-800); }
.echeance[data-statut="discussion"] .echeance-statut { background: var(--color-neutral-200); color: var(--color-neutral-800); }

.wg-root .legende-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--color-neutral-800);
}
.legende-traits > span { display: inline-flex; align-items: center; gap: 8px; }
.wg-muster { display: inline-block; width: 30px; height: 10px; border-radius: var(--radius-pill); }
.wg-muster--vigueur { background: var(--color-accent-700); }
.wg-muster--expire { background: repeating-linear-gradient(135deg, var(--color-accent-2-600) 0 4px, var(--color-accent-2-200) 4px 8px); }
.wg-muster--discussion { border: 1.5px dashed var(--color-neutral-600); }

.frist-karte {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-2-600);
  color: var(--color-auf-magenta);
}

.wg-root .test-formular {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 24px 0 28px;
  padding: 34px;
  border-radius: var(--radius-card);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-quiz);
}
.wg-root .test-formular fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.wg-root .test-formular legend {
  float: left;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-neutral-700);
}
.wg-root .test-formular legend + * { clear: both; }
.wg-root .test-formular fieldset + fieldset { padding-top: 20px; border-top: 1px solid var(--color-neutral-200); }
.wg-root .test-formular h2 { clear: both; margin: 0 0 8px; font-size: clamp(21px, 0.8vw + 16px, 26px); line-height: 1.2; }
.wg-root .test-formular .frage-hilfe { margin: 0 0 12px; }

.wg-root .rechner-feld {
  display: grid;
  gap: 6px;
  max-width: 460px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--color-neutral-800);
}
.wg-root .rechner-feld input,
.wg-root .rechner-feld select {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: none;
  color: var(--color-text);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.wg-root .rechner-feld input:focus-visible,
.wg-root .rechner-feld select:focus-visible { border-color: var(--color-accent-700); outline: 2px solid var(--color-accent); outline-offset: 2px; }

.wg-root .test-confidentialite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-neutral-800);
}
.test-confidentialite .wg-ico { width: 17px; height: 17px; }
.wg-root .article > .test-confidentialite { margin-bottom: 8px; }

.wg-root .ergebnis {
  margin: 24px 0 28px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}
.wg-root :where(.ergebnis) p { margin: 0 0 12px; font-size: 16.5px; }
.wg-root :where(.ergebnis) p:last-child { margin-bottom: 0; }
.wg-root .wg-quiz .wg-ergebnis p { margin: 0; }
.wg-root .ergebnis-titel {
  margin: 0 0 10px;
  font-size: var(--fs-result-title);
  font-weight: 600;
  line-height: var(--lh-head);
}
.wg-root p.ergebnis-titel { font-size: var(--fs-result-title); font-weight: 600; }
.wg-root .ergebnis-hinweis {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 24px;
  background: var(--color-accent-200);
  color: var(--color-accent-900);
  font-size: 15.5px;
}
.ergebnis-hinweis .wg-ico { width: 24px; height: 24px; }
.wg-root .ergebnis-zusatz {
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--color-bg);
  font-size: 15px;
  color: var(--color-neutral-800);
}
.ergebnis-immer, .ergebnis-abschluss { margin-top: 16px; }
.wg-root .ergebnis .meta .ref-loi { background: var(--color-yellow-tint); }

.wg-quiz__kopf { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.wg-quiz:not(.is-aktiv) .wg-quiz__kopf { display: none; }
.wg-root .wg-quiz__stand { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.wg-quiz__schiene {
  flex: 1;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--color-neutral-200);
}
.wg-quiz__schiene > span {
  display: block;
  width: 12.5%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-700));
  transition: width .5s cubic-bezier(.3, 1.4, .5, 1);
}
.wg-root .wg-quiz__zurueck:hover { transform: translateX(-3px); }
.wg-quiz__zurueck .wg-ico { width: 18px; height: 18px; }

.wg-quiz__frage { transition: opacity .18s, transform .18s; }
.wg-quiz.is-wechsel .wg-quiz__frage { opacity: 0; transform: translateY(10px) scale(.99); }

.wg-root .wg-quiz legend { margin-bottom: 16px; color: var(--color-text); }
.wg-quiz__nr { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: var(--color-neutral-700); }
.wg-quiz.is-aktiv .wg-quiz__nr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wg-quiz__text {
  display: block;
  font-size: var(--fs-question);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.wg-quiz--accueil.is-aktiv .wg-quiz__text { min-height: 68px; }

.wg-quiz__antworten { display: flex; flex-direction: column; gap: 10px; }

.wg-root .reponse {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 8px 20px 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent-200);
  color: var(--color-text);
  font-size: var(--fs-answer);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: transform .25s var(--ease-bounce), box-shadow .25s, background .2s, color .2s;
}
.wg-root .reponse:nth-child(2) { background: var(--color-accent-2-200); }
.wg-root .reponse:nth-child(3) { background: var(--color-yellow-tint); }
.wg-root .reponse:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.wg-root .reponse:active { transform: scale(.97); }
.wg-root .reponse.is-gewaehlt,
.wg-root .reponse:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.reponse:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wg-quiz.is-aktiv .reponse input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.wg-quiz:not(.is-aktiv) .reponse input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0 0 0 6px;
  accent-color: var(--color-accent-700);
}
.wg-quiz__taste {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}
.wg-quiz:not(.is-aktiv) .wg-quiz__taste,
.wg-quiz:not(.is-aktiv) .wg-quiz__pfeil { display: none; }
.wg-quiz__label { flex: 1; text-align: left; }
.wg-quiz__pfeil { width: 20px; height: 20px; }

.wg-quiz:not(.is-aktiv) .wg-quiz__frage + .wg-quiz__frage { padding-top: 18px; border-top: 1px solid var(--color-neutral-200); }
.wg-quiz.is-aktiv .wg-quiz__ohnejs { display: none; }
.wg-root .wg-quiz__ohnejs { font-size: 14px; color: var(--color-neutral-800); }
.wg-quiz__geprueft { display: none; margin-left: auto; }

.wg-sticker {
  position: absolute;
  z-index: 2;
  top: -30px;
  right: -26px;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--color-accent-2-600);
  box-shadow: var(--shadow-md);
  color: var(--color-auf-magenta);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.wg-sticker__ring { position: absolute; inset: 0; width: 104px; height: 104px; animation: spin 24s linear infinite; }
.wg-sticker__ring text { fill: currentColor; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 2.4px; }
.wg-sticker > span { position: relative; }
.wg-quiz--accueil .wg-quiz__kopf,
.wg-quiz--accueil .wg-ergebnis__kopf { padding-right: 64px; }

.wg-root .wg-quiz .wg-ergebnis {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  background: none;
}
.wg-ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wg-root .wg-quiz__aendern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14.5px;
  cursor: pointer;
}
.wg-root .wg-quiz__aendern:hover { background: var(--color-accent-100); color: var(--color-text); }
.wg-quiz__aendern .wg-ico { width: 15px; height: 15px; }
.wg-root .wg-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.wg-status .wg-ico { width: 15px; height: 15px; }
.wg-root .wg-status[data-typ="pflicht"] { background: var(--color-accent-700); color: var(--color-bg); }
.wg-root .wg-status[data-typ="frei"] { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.wg-root .wg-status[data-typ="offen"] { background: var(--color-process-yellow); color: var(--color-text); }

.wg-root .wg-ergebnis__datum {
  margin: 0;
  font-size: var(--fs-result-big);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -0.045em;
  color: var(--color-text);
  transform-origin: left bottom;
}
.wg-ergebnis__datum.is-neu { animation: pop .6s var(--ease-pop) both; }
.wg-root .wg-ergebnis__datum[data-typ="pflicht"] { color: var(--color-accent-800); }
.wg-root .wg-ergebnis__datum[data-typ="frei"] { color: var(--color-accent-2-700); }
.wg-root .wg-quiz .ergebnis-titel { margin: 0; text-wrap: pretty; }
.wg-root .wg-ergebnis__text { font-size: 16.5px; line-height: 1.5; color: var(--color-neutral-800); }
.wg-ergebnis__zusatz { display: flex; flex-direction: column; gap: 8px; }
.wg-ergebnis__zusatz:empty { display: none; }
.wg-root .wg-ergebnis__grundlage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.wg-ergebnis__grundlage > span:first-child { color: var(--color-neutral-700); }
.wg-ergebnis__grundlage .ref-loi { padding: 6px 13px; background: var(--color-bg); font-size: 14px; }

.wg-root .checker-zone {
  position: relative;
  margin: 8px 0 28px;
  border: 2.5px dashed color-mix(in srgb, var(--color-text) 40%, transparent);
  border-radius: 30px;
  background: var(--color-yellow-soft);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), border-color .2s, background .2s;
}
.wg-root .checker-zone:hover,
.wg-root .checker-zone-aktiv { transform: scale(1.015); border-color: var(--color-text); }
.checker-zone:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.checker-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
}
.checker-titel { display: block; font-size: 19px; font-weight: 600; color: var(--color-text); }
.checker-hilfe { display: block; font-size: 14px; color: var(--color-neutral-800); }
.checker-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.wg-root .checker-ergebnis {
  position: relative;
  margin: 0 0 32px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}
.checker-ergebnis::before {
  content: "";
  display: block;
  height: 10px;
  margin-bottom: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-300);
}
.checker-ergebnis[data-verdict="erfuellt"]::before { background: var(--color-accent-700); }
.checker-ergebnis[data-verdict="keine-e-rechnung"]::before { background: repeating-linear-gradient(135deg, var(--color-accent-2-600) 0 5px, var(--color-accent-2-200) 5px 10px); }
.checker-ergebnis[data-verdict="unklar"]::before { background: transparent; border: 2px dashed var(--color-neutral-500); }
.wg-root :where(.checker-ergebnis) p { font-size: 16px; margin: 0 0 12px; }
.wg-root .checker-ergebnis h3 { margin: 22px 0 10px; font-size: 18px; }
.wg-root .article .checker-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: var(--fs-result-title);
  font-weight: 600;
  line-height: 1.16;
  color: var(--color-text);
}
.checker-verdict .ico { width: 22px; height: 22px; }
.checker-verdict:focus { outline: none; }
.wg-root .checker-ergebnis[data-verdict="erfuellt"] .checker-verdict { color: var(--color-accent-800); }
.wg-root .checker-ergebnis[data-verdict="keine-e-rechnung"] .checker-verdict { color: var(--color-accent-2-700); }
.checker-daten {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: 6px 20px;
  margin: 0;
  font-size: 15px;
}
.checker-daten dt { font-size: 13.5px; font-weight: 600; color: var(--color-neutral-700); }
.checker-daten dd { margin: 0; overflow-wrap: anywhere; }
.wg-root .checker-hinweis { font-size: 14.5px; color: var(--color-neutral-700); }
.wg-root .article .checker-liste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.wg-root .checker-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--color-bg);
  font-size: 15px;
}
.checker-ok .ico { color: var(--color-accent-700); }
.checker-fehlt { font-weight: 600; }
.checker-fehlt .ico { color: var(--color-accent-2-700); }
.checker-bt {
  min-width: 52px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-200);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.checker-regel { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--color-neutral-700); }

.wg-main--start {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: 48px var(--page-pad) 0;
}

.wg-encre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 980px;
  overflow: hidden;
  pointer-events: none;
}
.wg-encre__c, .wg-encre__m, .wg-encre__y {
  position: absolute;
  mix-blend-mode: multiply;
  transition: left var(--dur-blob-move) var(--ease-blob), top var(--dur-blob-move) var(--ease-blob);
}
.wg-encre__c > span, .wg-encre__m > span, .wg-encre__y > span { display: block; width: 100%; height: 100%; }
.wg-encre__c { width: 620px; height: 620px; left: -8%; top: -6%; }
.wg-encre__m { width: 520px; height: 520px; left: 64%; top: -10%; }
.wg-encre__y { width: 460px; height: 460px; left: 32%; top: 38%; }
.wg-encre__c > span { background: var(--color-accent-400); opacity: .62; animation: blob 18s ease-in-out 0s infinite, drift 25.2s ease-in-out 0s infinite; }
.wg-encre__m > span { background: var(--color-accent-2-400); opacity: .55; animation: blob 22s ease-in-out -6s infinite, drift 30.8s ease-in-out -6s infinite; }
.wg-encre__y > span { background: var(--color-process-yellow); opacity: .5; animation: blob 20s ease-in-out -11s infinite, drift 28s ease-in-out -11s infinite; }
.wg-encre[data-phase="1"] .wg-encre__c { left: 2%; top: 18%; }
.wg-encre[data-phase="1"] .wg-encre__m { left: 72%; top: 26%; }
.wg-encre[data-phase="1"] .wg-encre__y { left: 42%; top: -4%; }
.wg-encre[data-phase="2"] .wg-encre__c { left: -6%; top: 34%; }
.wg-encre[data-phase="2"] .wg-encre__m { left: 52%; top: 2%; }
.wg-encre[data-phase="2"] .wg-encre__y { left: 80%; top: 8%; }
.wg-encre[data-phase="3"] .wg-encre__c { left: 12%; top: 6%; }
.wg-encre[data-phase="3"] .wg-encre__m { left: 76%; top: 38%; }
.wg-encre[data-phase="3"] .wg-encre__y { left: 18%; top: 42%; }
.wg-encre[data-phase="4"] .wg-encre__c { left: 28%; top: -8%; }
.wg-encre[data-phase="4"] .wg-encre__m { left: 58%; top: 16%; }
.wg-encre[data-phase="4"] .wg-encre__y { left: -4%; top: 26%; }
.wg-encre__raster {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text) 16%, transparent) 26%, transparent 29%);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.wg-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.wg-hero__intro { display: flex; flex-direction: column; gap: 22px; padding-top: 40px; }
.wg-root .wg-pille {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
}
.wg-pille__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-2-600); }
.wg-root .wg-hero h1 {
  font-size: clamp(46px, 8vw - 34px, 62px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.wg-hero h1 mark {
  display: inline-block;
  margin: 0 -0.04em;
  padding: 0 .18em;
  border-radius: .34em;
  background: var(--color-process-yellow);
  color: inherit;
}
.wg-root .wg-hero .chapo { max-width: 440px; margin: 0; font-size: 19px; line-height: 1.45; color: var(--color-neutral-900); }
.wg-hero__chips { margin-top: 10px; font-size: 14.5px; }
.wg-root .wg-hero .test-formular { margin: 0; }

.wg-folge {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px;
  margin-top: -76px;
}
.wg-folge__software {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
}
.wg-folge__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.wg-root .wg-folge__kopf h2 { font-size: 21px; line-height: 1.2; }
.wg-folge__kopf > span { font-size: 13px; color: var(--color-neutral-700); }
.wg-folge__liste { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wg-folge__liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 8px 0 14px;
  border-radius: 20px;
  background: var(--color-bg);
}
.wg-root .wg-folge__name { flex: 1; font-size: 16.5px; color: var(--color-text); text-decoration: none; }
.wg-root .wg-folge__name:hover { color: var(--color-accent-700); text-decoration: underline; }
.wg-root .wg-folge__go {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}
.wg-folge__go .wg-ico { width: 14px; height: 14px; }
.wg-folge__seite { display: flex; flex-direction: column; gap: 16px; }
.wg-root .wg-folge__rechner,
.wg-root .wg-folge .wg-folge__fristen {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-lg);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.wg-root .wg-folge__rechner,
.wg-root .wg-folge__rechner:hover { background: var(--color-accent-2-600); color: var(--color-auf-magenta); }
.wg-root .wg-folge .wg-folge__fristen,
.wg-root .wg-folge .wg-folge__fristen:hover { background: var(--color-accent-200); color: var(--color-accent-900); }
.wg-folge__klecks {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-process-yellow);
  mix-blend-mode: multiply;
}
.wg-folge__rechner > :not(.wg-folge__klecks) { position: relative; }
.wg-folge__ico { width: 28px; height: 28px; }
.wg-folge__titel { font-size: 21px; font-weight: 600; }
.wg-folge__los { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 600; }
.wg-folge__los .wg-ico { width: 15px; height: 15px; }

.wg-laufband {
  margin: 0 -12px;
  padding: 16px 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-process-yellow);
  font-size: 19px;
  font-weight: 600;
}
.wg-laufband__spur { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.wg-laufband__reihe { display: flex; flex: none; gap: 36px; padding-right: 36px; }
.wg-laufband__eintrag { display: flex; align-items: center; gap: 36px; white-space: nowrap; }
.wg-laufband__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-700); }
.wg-laufband__eintrag:nth-child(even) .wg-laufband__punkt { background: var(--color-accent-2-600); }

.wg-root .wg-stichtage h2,
.wg-root .wg-werkzeuge > h2,
.wg-root .wg-vergleich h2,
.wg-root .wg-vertrauen h2 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: var(--ls-head);
}
.wg-root .wg-mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 16px;
}
.wg-mehr .wg-ico { width: 15px; height: 15px; }

.wg-stichtage { display: flex; flex-direction: column; gap: 24px; }
.wg-stichtage__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.wg-werkzeuge { display: flex; flex-direction: column; gap: 24px; }
.wg-werkzeuge__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
.wg-werkzeuge__rechts { display: flex; flex-direction: column; gap: 18px; }
.wg-pruefen {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--color-yellow-soft);
}
.wg-pruefen__klecks {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--color-process-yellow);
  mix-blend-mode: multiply;
  opacity: .7;
}
.wg-root .wg-pruefen h3,
.wg-root .wg-minirechner h3 { position: relative; display: flex; align-items: center; gap: 10px; font-size: 24px; }
.wg-pruefen h3 .wg-ico, .wg-minirechner h3 .wg-ico { width: 28px; height: 28px; }
.wg-root .wg-pruefen p { position: relative; max-width: 460px; font-size: 16px; line-height: 1.45; }
.wg-root .wg-pruefen__zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  margin: 0;
  padding: 24px;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}
.wg-root .wg-pruefen__zone:hover { color: var(--color-text); }
.wg-pruefen__zone > .wg-ico { width: 34px; height: 34px; }

.wg-minirechner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}
.wg-root .wg-minirechner h3 { color: var(--color-accent-900); }
.wg-root .wg-minirechner .rechner-feld { display: flex; flex-direction: column; gap: 8px; max-width: none; margin: 0; font-size: 15px; color: var(--color-accent-900); }
.wg-minirechner__wert { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); }
.wg-root .wg-minirechner input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--color-accent-700);
  cursor: pointer;
}
.wg-minirechner__urteil { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-urteil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-accent-900);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  transition: background .3s;
}
.wg-urteil .wg-ico { width: 15px; height: 15px; }
.wg-urteil[data-urteil="ueber"] { background: var(--color-text); color: var(--color-bg); }
.wg-urteil--knapp { background: var(--color-accent-2-600); color: var(--color-auf-magenta); }
.wg-root .wg-minirechner .wg-mehr { color: var(--color-accent-800); align-self: flex-start; }

.wg-root .wg-kachel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-900);
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
  transition: transform .25s var(--ease-bounce);
}
.wg-root .wg-kachel:hover { color: var(--color-accent-2-900); transform: scale(1.02); }
.wg-kachel > span:first-child { flex: 1; }
.wg-kachel strong { font-size: 21px; font-weight: 600; }
.wg-kachel__knopf {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent-2-700);
  color: var(--color-bg);
}
.wg-kachel__knopf .wg-ico { width: 20px; height: 20px; }

.wg-vergleich { display: flex; flex-direction: column; gap: 20px; }
.wg-tabelle {
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
}
.wg-root .wg-tabelle .tableau-anbieter { margin: 0; padding: 0; background: none; border-radius: 0; }
.wg-root .wg-tabelle .tableau-note { margin: 14px 4px 2px; }
.wg-tabelle__aktion { text-align: right; }
.wg-root .wg-tabelle__aktion .wg-knopf { min-height: 44px; padding: 0 18px; font-size: 15px; }

.wg-vertrauen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.wg-vertrauen__intro { display: flex; flex-direction: column; gap: 12px; }
.wg-root .wg-vertrauen__intro p { font-size: 17px; line-height: 1.5; color: var(--color-neutral-800); }
.wg-vertrauen__liste { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wg-root .wg-vertrauen__liste > li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  border-radius: 0;
  background: none;
}
.wg-root .wg-vertrauen__liste > .wg-vertrauen__person {
  padding: 16px 20px 16px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
}
.wg-vertrauen__text { flex: 1; font-size: 16px; line-height: 1.45; }
.wg-vertrauen__text .ref-loi { background: var(--color-process-yellow); white-space: nowrap; }
.wg-vertrauen__liste a { font-size: 15px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.wg-vertrauen__ico { width: 28px; height: 28px; margin: 0 12px; color: var(--color-accent-700); }
.wg-vertrauen__ico--m { color: var(--color-accent-2-700); }
.wg-avatar { position: relative; flex: none; width: 52px; height: 52px; }
.wg-avatar > span { position: absolute; mix-blend-mode: multiply; }
.wg-avatar > span:nth-child(1) { inset: 0; border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%; background: var(--color-accent-400); }
.wg-avatar > span:nth-child(2) { inset: 4px -4px -4px 4px; border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; background: var(--color-accent-2-300); }
.wg-avatar b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; }

.cookieadmin_law_container {
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  width: 470px !important;
  max-width: calc(100vw - 20px) !important;
  font-family: var(--font-body) !important;
}
.cookieadmin_law_container .cookieadmin_consent_inside {
  padding: 14px 14px 14px 20px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--color-neutral-100) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-text) !important;
  animation: rise .4s ease-out;
}
.cookieadmin_law_container #cookieadmin_notice_title {
  margin: 0 0 4px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}
.cookieadmin_law_container #cookieadmin_notice,
.cookieadmin_law_container .cookieadmin_notice_con {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--color-text) !important;
}
.cookieadmin_law_container a { color: var(--color-accent-700) !important; }
.cookieadmin_law_container .cookieadmin_consent_btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
}
.cookieadmin_law_container button.cookieadmin_btn,
.cookieadmin_cookie_modal button.cookieadmin_btn {
  flex: 1 1 auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  cursor: pointer;
}
.cookieadmin_law_container button.cookieadmin_btn:hover,
.cookieadmin_cookie_modal button.cookieadmin_btn:hover { background: var(--color-accent-100) !important; }
.cookieadmin_law_container .cookieadmin-poweredby { margin-top: 8px !important; font-size: 12px; opacity: .7; }
.cookieadmin_cookie_modal {
  border: 0 !important;
  border-radius: 32px !important;
  background: var(--color-neutral-100) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
button.cookieadmin_re_consent { left: 16px !important; bottom: 16px !important; }

@media (max-width: 1139px) {
  .wg-nav { display: none; }
  .wg-root .wg-themen { display: inline-flex; }
}

@media (max-width: 999px) {
  .wg-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wg-hero__intro { gap: 10px; padding-top: 0; }
  .wg-pille, .wg-hero__chips { display: none !important; }
  .wg-root .wg-hero h1 { font-size: 46px; }
  .wg-root .test-formular { padding: 26px; }
  .wg-quiz--accueil.is-aktiv .wg-quiz__text { min-height: 0; }
  .wg-quiz--accueil .wg-quiz__geprueft { display: inline; }
  .wg-stichtage__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-mega__panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 819px) {
  :root { --section-gap: 64px; --page-pad: 16px; }

  .wg-kopf { padding: 8px 8px 0; }
  .wg-root .wg-themen, .wg-root .wg-kopf__test { display: none; }
  .wg-logo__name { font-size: 17px; }

  .wg-daumenleiste {
    position: fixed;
    z-index: 40;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-neutral-100) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
  }
  .wg-root .wg-daumen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15.5px;
    text-decoration: none;
  }
  .wg-root .wg-daumen--test,
  .wg-root .wg-daumen--test:hover { background: var(--color-text); color: var(--color-bg); font-weight: 600; }
  .wg-daumen .wg-ico { width: 19px; height: 19px; }

  .wg-suche__panel { top: 12px; }

  .wg-main { padding: 12px var(--page-pad) 0; }
  .wg-main--start { padding: 16px var(--page-pad) 0; }
  .wg-seitenkopf { margin: 4px auto 20px; }
  .bandeau-fraicheur { font-size: 13.5px; }

  .wg-root .test-formular { padding: 18px; border-radius: var(--radius-lg); }
  .wg-root .reponse { min-height: 58px; }
  .wg-sticker { display: none; }
  .wg-quiz--accueil .wg-quiz__kopf,
  .wg-quiz--accueil .wg-ergebnis__kopf { padding-right: 0; }
  .wg-root .wg-hero h1 { font-size: 28px; }
  .wg-root .wg-hero .chapo { font-size: 16px; }

  .wg-folge { grid-template-columns: minmax(0, 1fr); margin-top: -40px; }
  .wg-laufband { margin: 0 -8px; padding: 12px 0; font-size: 16px; }

  .wg-root .wg-stichtage h2,
  .wg-root .wg-werkzeuge > h2,
  .wg-root .wg-vergleich h2,
  .wg-root .wg-vertrauen h2 { font-size: 30px; }
  .wg-stichtage__raster,
  .wg-werkzeuge__raster,
  .wg-vertrauen,
  .wg-weiter__karten { grid-template-columns: minmax(0, 1fr); }
  .wg-vertrauen { gap: 18px; }
  .wg-root .wg-vertrauen__liste > .wg-vertrauen__person { border-radius: var(--radius-md); }
  .wg-root .wg-vertrauen__liste > li { flex-wrap: wrap; padding: 14px 12px; }
  .wg-vertrauen__ico { margin: 0 4px; }
  .wg-pruefen, .wg-minirechner { padding: 22px; border-radius: var(--radius-lg); }
  .wg-tabelle { padding: 8px; border-radius: var(--radius-lg); }

  .wg-root .ergebnis, .wg-root .checker-ergebnis, .wg-root .source-bloc { padding: 20px; }
  .wg-root .article blockquote { padding: 20px; }
  .wg-root .entree-protokoll { grid-template-columns: minmax(0, 1fr); }
  .entree-tete { flex-direction: row; align-items: center; gap: 10px; }
  .checker-daten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .checker-daten dd { margin-bottom: 8px; }
  .checker-regel { margin-left: 0; flex-basis: 100%; }

  .wg-root .tableau-anbieter,
  .wg-root .tableau-anbieter tbody,
  .wg-root .tableau-anbieter tr,
  .wg-root .tableau-anbieter td { display: block; width: auto; }
  .wg-root .tableau-anbieter { padding: 8px; border-radius: var(--radius-lg); }
  .wg-root .tableau-anbieter caption { display: block; padding: 6px 8px 10px; }
  .tableau-anbieter thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .wg-root .tableau-anbieter tbody tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
  }
  .tableau-anbieter tbody tr:hover { transform: none; }
  .wg-root .tableau-anbieter td,
  .wg-root .tableau-anbieter td:first-child,
  .wg-root .tableau-anbieter td:last-child { padding: 0; border-radius: 0; background: none; }
  .tableau-anbieter td[data-libelle]:not([data-libelle=""])::before {
    content: attr(data-libelle);
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  .wg-root .tableau-anbieter td.oui,
  .wg-root .tableau-anbieter td.non { padding-left: 32px !important; background-position: 0 calc(100% - 1px) !important; min-height: 24px; }
  .tableau-anbieter td.oui[data-libelle]::before,
  .tableau-anbieter td.non[data-libelle]::before { margin-left: -32px; }
  .wg-root .tableau-anbieter .cellule-nom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 18px;
  }
  .wg-root .tableau-anbieter .cellule-prix { display: inline-block; }
  
  .wg-root .tableau-anbieter tr:has(.cellule-prix) td.prix { display: none; }
  .wg-root .tableau-anbieter a[rel~="sponsored"] { min-height: 44px; }
  .wg-tabelle__aktion { text-align: left; }

  .wg-pied__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 44px 20px 24px; }
  .wg-root .wg-pied a { display: inline-flex; align-items: center; min-height: 44px; }
  .wg-pied__spalte ul { gap: 0; }
  .wg-pied__fuss { padding: 0 20px 108px; }   

  .cookieadmin_law_container {
    left: 10px !important;
    right: 10px !important;
    bottom: 86px !important;
    width: auto !important;
    max-width: none !important;
  }
  button.cookieadmin_re_consent { bottom: 92px !important; }
  
  .cookieadmin_law_container .cookieadmin_consent_inside { padding: 12px !important; }
  .cookieadmin_law_container #cookieadmin_notice_title { font-size: 14.5px !important; }
  .cookieadmin_law_container .cookieadmin_notice_con {
    max-height: 4.3em !important;
    overflow-y: auto !important;
    font-size: 13.5px !important;
  }
  .cookieadmin_law_container #cookieadmin_notice { font-size: 13.5px !important; }
  .cookieadmin_law_container .cookieadmin_consent_btns { flex-wrap: nowrap !important; margin-top: 8px !important; }
  .cookieadmin_law_container button.cookieadmin_btn { padding: 0 8px !important; font-size: 13px !important; white-space: nowrap; }
  .cookieadmin_law_container .cookieadmin-poweredby { display: none !important; }
}

@media (max-width: 819px) {
  .wg-encre { height: 760px; }
  .wg-encre__c { width: 341px; height: 341px; }
  .wg-encre__m { width: 286px; height: 286px; }
  .wg-encre__y { width: 253px; height: 253px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.erw-page #masthead,
.erw-page .site-header,
.erw-page .site-footer,
.erw-page .ast-title-bar,
.erw-page .ast-breadcrumbs,
.erw-page .entry-header,
.erw-page .ast-single-post .post-title { display: none !important; }

.erw-page .site-content,
.erw-page #content,
.erw-page .ast-container,
.erw-page .content-area,
.erw-page #primary,
.erw-page .ast-article-single,
.erw-page .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.erw-page .site { padding: 0 !important; }
.erw-page { background: var(--color-bg); }

.erw-page #page,
.erw-page .site,
.erw-page .site-content,
.erw-page #content,
.erw-page .ast-container,
.erw-page #primary,
.erw-page #main,
.erw-page .ast-article-single,
.erw-page .entry-content { overflow: visible !important; }

.erw-page .wg-root table,
.erw-page .wg-root th,
.erw-page .wg-root td { border: 0; }
.erw-page .wg-root button:focus { outline: none; }
.erw-page .wg-root button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media print {
  body, .wg-root { background: #fff; }
  .wg-kopf, .wg-daumenleiste, .wg-sheet, .wg-suche, .wg-encre, .wg-laufband,
  .wg-sticker, .wg-weiter, .cookieadmin_law_container { display: none !important; }
  .echeance, .test-formular, .tableau-anbieter tr { break-inside: avoid; }
}

.erw-page .wg-root a[class],
.erw-page .wg-root a[class]:hover { text-decoration: none; }
.erw-page .wg-root a[class] .wg-mega__titel,
.erw-page .wg-root a[class]:hover .wg-mega__titel { text-decoration: none; }
.erw-page .wg-root a:focus-visible,
.erw-page .wg-root button:focus-visible,
.erw-page .wg-root input:focus-visible,
.erw-page .wg-root summary:focus-visible {
  outline: 2px solid var(--color-accent-700);
  outline-offset: 2px;
}
@media (max-width: 819px) {
  .erw-page .wg-root .fil-ariane a,
  .erw-page .wg-pied__cookies { display: inline-flex; align-items: center; min-height: 44px; }
}
.wg-sticker { right: -18px; }

#ast-scroll-top { display: none !important; }

.wg-inhalt { margin: 0 auto 8px; max-width: var(--lese); }
.wg-inhalt summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.wg-inhalt summary::-webkit-details-marker { display: none; }
.wg-inhalt__titel { flex: none; }
.wg-inhalt__schiene {
  flex: 1;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--color-neutral-200);
}
.wg-inhalt__schiene > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-700));
  transition: width .2s linear;
}
.wg-inhalt[open] summary .wg-caret { transform: rotate(180deg); }
.wg-root .wg-inhalt ol { margin: 10px 0 0; padding: 12px 16px 12px 34px; border-radius: var(--radius-lg); background: var(--color-neutral-100); }
.wg-root .wg-inhalt li { margin: 0; font-size: 15px; line-height: 1.35; }
.wg-root .wg-inhalt a { display: block; padding: 7px 0; color: var(--color-neutral-700); text-decoration: none; }
.wg-root .wg-inhalt a:hover,
.wg-root .wg-inhalt a[aria-current="true"] { color: var(--color-text); }
.wg-root .wg-inhalt a[aria-current="true"] { font-weight: 600; }
.wg-lesen h2[id] { scroll-margin-top: 140px; }

@media (min-width: 1140px) {
  .wg-lesen {
    display: grid;
    grid-template-columns: minmax(0, var(--lese)) 232px;
    gap: 48px;
    justify-content: center;
    align-items: start;
  }
  .wg-lesen > .article { margin: 0; grid-column: 1; grid-row: 1; }
  .wg-lesen > .wg-inhalt {
    position: sticky;
    top: 124px;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    max-height: calc(100vh - 148px);
    overflow-y: auto;
  }
  .wg-inhalt summary { padding: 0 0 10px; border-radius: 0; background: none; cursor: default; pointer-events: none; }
  .wg-inhalt summary .wg-caret { display: none; }
  .wg-root .wg-inhalt ol { margin: 0; padding: 4px 0 0 18px; background: none; }
  .wg-root .wg-inhalt li::marker { color: var(--color-neutral-700); font-size: 13px; }
}

@media (max-width: 1139px) {
  .wg-lesen > .wg-inhalt {
    position: sticky;
    top: 76px;               
    z-index: 5;
    margin-bottom: 18px;
  }
  .wg-inhalt summary { box-shadow: var(--shadow-sm); }
  .wg-root .wg-inhalt ol { max-height: 55vh; overflow-y: auto; box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .wg-inhalt__schiene > span { transition: none; }
}

.wg-suchseite { margin: 0 0 28px; }
.wg-root .wg-suchseite__label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.wg-suchseite__zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.wg-root .wg-suchseite input[type="search"] {
  flex: 1 1 240px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
}
.wg-root .wg-suchseite input[type="search"]:focus { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.wg-root .wg-suchseite__beschr { margin: -6px 0 18px 4px; font-size: 14.5px; color: var(--color-neutral-700); }
.erw-gabarit .wg-main { padding-bottom: 40px; }

.wg-root .article .kurzantwort {
  margin: 0 0 32px;
  padding: 20px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-100);
  color: var(--color-text);
}
.wg-root .article .kurzantwort .etiquette { margin: 0 0 8px; color: var(--color-accent-800); }
.wg-root .article .kurzantwort p:not(.etiquette) {
  margin: 0 0 10px;
  font-size: var(--fs-answer);
  line-height: 1.45;
}
.wg-root .article .kurzantwort p:last-child { margin-bottom: 0; }

.wg-root .article .kurzueberblick {
  margin: 0 0 32px;
  padding: 20px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-100);
  color: var(--color-text);
}
.wg-root .article .kurzueberblick .etiquette { margin: 0 0 8px; color: var(--color-accent-800); }
.wg-root .article .kurzueberblick ul { margin: 0 0 10px; padding-left: 1.2em; }
.wg-root .article .kurzueberblick li {
  margin: 0 0 8px;
  font-size: var(--fs-answer);
  line-height: 1.45;
}
.wg-root .article .kurzueberblick li:last-child { margin-bottom: 0; }
.wg-root .article .kurzueberblick .stand {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-neutral-700);
}

.wg-root .article .beleg { text-decoration: underline dotted; }
.wg-root .article sup.beleg-nr { line-height: 0; font-size: 0.75em; }
.wg-root .article sup.beleg-nr a {
  
  display: inline-block;
  padding: 8px 4px;
  margin: -8px -3px -8px -2px;
  text-decoration: none;
  color: var(--color-accent-800);
}
.wg-root .article sup.beleg-nr a:hover { text-decoration: underline; }
.wg-root .article sup.beleg-nr a:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 1px; }
.wg-root .article section.quellen { margin: 40px 0 24px; font-size: var(--fs-small); line-height: 1.5; }
.wg-root .article section.quellen h2 { font-size: 1.15rem; }
.wg-root .article section.quellen li { margin: 0 0 6px; overflow-wrap: anywhere; }
.wg-root .article section.quellen a { overflow-wrap: anywhere; word-break: break-word; }

.wg-root .article .faq { margin: 40px 0 32px; }
.wg-root .article .faq details {
  margin: 0 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.wg-root .article .faq summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 12px 52px 12px 20px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.wg-root .article .faq summary::-webkit-details-marker { display: none; }
.wg-root .article .faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent-800);
  border-bottom: 2px solid var(--color-accent-800);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-fast) ease;
}
.wg-root .article .faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.wg-root .article .faq summary:hover { color: var(--color-accent-800); }
.wg-root .article .faq summary:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.wg-root .article .faq details > p { margin: 0; padding: 0 20px 18px; }

.wg-root .article .tarifmatrix {
  max-width: 520px;
  margin: 28px 0 32px;
  padding: 16px 20px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}
.tarifmatrix__bild { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.wg-root .article .tarifmatrix figcaption {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-neutral-700);
}
.tm-kopf { font-size: 12px; font-weight: 600; fill: var(--color-neutral-700); }
.tm-anbieter { font-size: 16px; font-weight: 600; fill: var(--color-text); }
.tm-tarif { font-size: 14px; fill: var(--color-neutral-800); }
.tm-preis { font-size: 14.5px; font-weight: 600; fill: var(--color-text); }
.tm-linie { stroke: var(--color-neutral-300); stroke-width: 1; }
.tm-legende { font-size: 12px; fill: var(--color-neutral-700); }
.tm-ja { fill: var(--color-accent-700); }
.tm-ja__haken { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tm-nein { fill: none; stroke: var(--color-neutral-600); stroke-width: 1.6; stroke-dasharray: 3 2.6; }
.tm-nein__kreuz { fill: none; stroke: var(--color-neutral-800); stroke-width: 1.8; stroke-linecap: round; }
.tm-nd { fill: var(--color-yellow-soft); stroke: var(--color-neutral-600); stroke-width: 1.2; }
.tm-nd__text { font-size: 12px; font-weight: 600; fill: var(--color-text); }

.wg-root .wg-andere { max-width: var(--lese); margin: 40px auto 24px; }
.wg-root .wg-andere__kopf { margin: 0 0 14px; font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.2; }
.wg-andere__liste { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.wg-andere__liste li { margin: 0; }
.wg-root .wg-andere__liste a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-text);
  text-decoration: none;
}
.wg-root .wg-andere__liste a:hover { background: var(--color-accent-100); }
.wg-root .wg-andere__liste a:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.wg-andere__titel { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wg-andere__beschr { font-size: var(--fs-small); line-height: 1.4; color: var(--color-neutral-700); }
.wg-root .wg-andere__alle { color: var(--color-accent-800); }

@media (max-width: 819px) {
  .wg-root .article .kurzantwort { padding: 16px 18px 18px; }
  .wg-root .article .kurzueberblick { padding: 16px 18px 18px; }
  .wg-root .article .tarifmatrix { padding: 12px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-root .article .faq summary::after { transition: none; }
}
.wg-root .wg-werkzeuge__mehr { margin: 0; padding: 0 4px; }
.wg-root .wg-werkzeuge__mehr a { display: inline-block; padding: 10px 0; color: var(--color-accent-800); }

.wg-root .fc-filter:empty { display: none; }
.wg-root .fc-filter {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
}
.wg-root .fc-filter__form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: end;
}
.wg-root .fc-filter__champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wg-root .fc-filter__champ--haken { grid-column: 1 / -1; }
.wg-root .fc-filter label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-accent-800); }
.wg-root .fc-filter input[type="search"],
.wg-root .fc-filter select {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--color-accent-600);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}
.wg-root .fc-filter input:focus-visible,
.wg-root .fc-filter select:focus-visible,
.wg-root .fc-filter__reset:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.wg-root .fc-filter .fc-filter__haken {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; font-weight: var(--fw-regular); color: var(--color-text);
}
.wg-root .fc-filter__haken input { width: 20px; height: 20px; flex: none; }
.wg-root .fc-filter__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.wg-root .fc-filter__zahl { margin: 0; font-size: var(--fs-small); color: var(--color-accent-900); font-weight: var(--fw-bold); }
.wg-root .fc-filter__reset {
  min-height: 44px; padding: 6px 14px; border: 0; background: none;
  color: var(--color-accent-800); font: inherit; font-size: var(--fs-small);
  text-decoration: underline; cursor: pointer;
}
.wg-root .fc-filter__reset[hidden] { display: none; }

.wg-root .fc-syntax { margin: 0 0 24px; border-radius: var(--radius-md); background: var(--color-surface); }
.wg-root .fc-syntax > summary {
  display: block;
  padding: 14px 20px;
  min-height: 44px;
  box-sizing: border-box;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-accent-800);
  cursor: pointer;
  list-style: none;
}
.wg-root .fc-syntax > summary::-webkit-details-marker { display: none; }
.wg-root .fc-syntax > summary::before { content: "▸"; display: inline-block; margin-right: 10px; transition: transform var(--dur-fast); }
.wg-root .fc-syntax[open] > summary::before { transform: rotate(90deg); }
.wg-root .fc-syntax > summary:hover { color: var(--color-accent-900); }
.wg-root .fc-syntax > summary:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; border-radius: var(--radius-md); }
.wg-root .fc-syntax table { margin: 0; }
.wg-root .fc-syntax table[hidden] { display: none; }

@media (max-width: 819px) {
  .wg-root .fc-filter { padding: 14px 14px 12px; }
  .wg-root .fc-filter__form { grid-template-columns: minmax(0, 1fr); }
  .wg-root .fc-syntax > summary { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-root .fc-syntax > summary::before { transition: none; }
}