/* WG Bausteine: Widget „umfang“ (Leistungsumfang, optional Pakete). Alle Selektoren beginnen mit #umfang.
   Teil A: Glaskarten mit Linien-Symbol in kleiner Lime-Glasfläche, darunter eine Hinweisleiste mit Häkchen.
   Teil B: Paketkarten, das hervorgehobene Paket in Graphit mit Lime. */
#umfang{isolation:isolate}
#umfang .v3-head h2{text-wrap:balance}

/* ---------- Teil A: Das steckt drin ---------- */
#umfang .um-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:56px 0 0;padding:0;list-style:none}
#umfang .um-item{display:flex;min-width:0;margin:0;padding:0}
#umfang .um-card{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;padding:26px 26px 28px;border-radius:20px}
#umfang .um-ico{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;color:var(--lime-ink)}
#umfang .um-ico .v3-glassdot{left:0;top:0;width:100%;border-radius:15px;box-shadow:0 0 0 1px rgba(20,23,12,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(110,150,0,.16),0 6px 14px rgba(110,150,0,.16),0 0 22px rgba(194,242,28,.34);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
#umfang .um-ico .v3-ico{position:relative;z-index:3;transition:transform .5s var(--ease)}
#umfang .um-title{margin:22px 0 0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
#umfang .um-text{margin:8px 0 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--muted)}
@media (hover:hover){
  #umfang .um-card:hover .um-ico .v3-glassdot,#umfang .um-card:hover .um-ico .v3-ico{transform:translateY(-3px)}
  #umfang .um-card:hover .um-ico .v3-glassdot{box-shadow:0 0 0 1px rgba(20,23,12,.05),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(110,150,0,.16),0 10px 18px rgba(110,150,0,.2),0 0 28px rgba(194,242,28,.42)}
}

/* Hinweisleiste */
#umfang .um-note{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:20px 0 0;padding:11px 22px 11px 11px;border-radius:28px;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1.45;color:var(--ink-2)}
#umfang.um-center .um-note{margin-left:auto;margin-right:auto}
#umfang .um-note-check{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 1px rgba(20,23,12,.08) inset,0 0 14px var(--glow)}
#umfang .um-note-check .v3-ico{stroke-width:2.6}
#umfang .um-note-text{min-width:0}

/* ---------- Teil B: Pakete ---------- */
#umfang .um-pk-part{margin-top:clamp(72px,8vw,112px)}
#umfang .um-pk-head{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 0 36px}
#umfang.um-center .um-pk-head{align-items:center;margin-left:auto;margin-right:auto;text-align:center}
#umfang .um-sub{margin:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
#umfang .um-sub-text{margin:0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--muted)}

#umfang .um-pk-grid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
#umfang .um-pk-grid--n1{--cols:1;max-width:440px}
#umfang .um-pk-grid--n2{--cols:2;max-width:880px}
#umfang .um-pk-grid--n4{--cols:4}
#umfang .um-pk-grid--n4 .um-pk{padding:28px 22px 22px}
#umfang .um-pk-grid--n4 .um-pk-amount{font-size:48px}
#umfang.um-center .um-pk-grid{margin-left:auto;margin-right:auto}
#umfang .um-pk-item{display:flex;min-width:0;margin:0;padding:0}

#umfang .um-pk{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;padding:30px 28px 28px;border-radius:var(--radius);overflow:hidden;isolation:isolate}
#umfang .um-pk-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
#umfang .um-pk-name{margin:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
#umfang .um-pk-tag{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
#umfang .um-pk-for{margin:10px 0 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:15px;line-height:1.5;color:var(--muted)}

/* Preis groß, Zusatz klein */
#umfang .um-pk-price{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:26px 0 0;padding:0 0 24px;border-bottom:1px solid var(--line)}
#umfang .um-pk-amount{font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:900;font-size:54px;line-height:1;letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
#umfang .um-pre{margin-right:.06em;font-size:.36em;font-weight:800;letter-spacing:-.005em;color:var(--muted)}
#umfang .um-cur{margin-left:.08em;font-size:.56em;font-weight:800;letter-spacing:0}
#umfang .um-pk-price.is-text .um-pk-amount{font-size:34px;font-weight:800;letter-spacing:-.03em;white-space:normal}
#umfang .um-pk-unit{font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Leistungen als Häkchenliste */
#umfang .um-pk-list{display:flex;flex-direction:column;gap:12px;margin:24px 0 0;padding:0;list-style:none}
#umfang .um-pk-list li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
#umfang .um-pk-check{display:grid;place-items:center;flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(194,242,28,.34);color:var(--lime-ink);box-shadow:inset 0 0 0 1px rgba(110,150,0,.14)}
#umfang .um-pk-check .v3-ico{width:12px;height:12px;stroke-width:2.8}
#umfang .um-pk-cta{margin-top:auto;padding-top:30px}
#umfang .um-pk-btn{width:100%;padding:16px 20px;font-size:15px;gap:8px}
#umfang .um-pk-btn::after{width:16px;height:16px}

/* Pakete einer Reihe teilen sich die Zeilen: Preise, Listen und Buttons stehen auf gleicher Höhe */
@supports (grid-template-rows:subgrid){
  #umfang .um-pk-item{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  #umfang .um-pk{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
  #umfang .um-pk-top{grid-row:1}
  #umfang .um-pk-for{grid-row:2}
  #umfang .um-pk-price{grid-row:3;align-self:end}
  #umfang .um-pk-list{grid-row:4}
  #umfang .um-pk-cta{grid-row:5;align-self:end}
}

/* Hervorgehobenes Paket: Graphit mit Lime */
#umfang .um-pk--hi{background:var(--graphite);color:#fff;box-shadow:0 0 0 1px rgba(194,242,28,.3),0 30px 60px rgba(20,20,20,.22),0 0 56px rgba(194,242,28,.16)}
#umfang .um-pk--hi::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(120% 70% at 90% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 70% at 90% 0%,#000 0%,transparent 70%);pointer-events:none}
#umfang .um-pk-glow{position:absolute;right:-35%;top:-28%;width:110%;height:62%;z-index:-2;background:radial-gradient(closest-side,rgba(194,242,28,.26),transparent);filter:blur(26px);pointer-events:none}
#umfang .um-pk--hi .um-pk-name{color:#fff}
#umfang .um-pk--hi .um-pk-tag{background:var(--lime);border-color:transparent;color:var(--lime-ink);box-shadow:0 0 18px rgba(194,242,28,.35)}
#umfang .um-pk--hi .um-pk-for{color:rgba(255,255,255,.66)}
#umfang .um-pk--hi .um-pk-price{border-bottom-color:rgba(255,255,255,.12)}
#umfang .um-pk--hi .um-pk-amount{background:linear-gradient(180deg,#E6FB8E 0%,var(--lime) 72%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#umfang .um-pk--hi .um-pre{color:inherit}
#umfang .um-pk--hi .um-pk-unit{color:rgba(255,255,255,.56)}
#umfang .um-pk--hi .um-pk-list li{color:rgba(255,255,255,.84)}
#umfang .um-pk--hi .um-pk-check{background:rgba(194,242,28,.16);color:var(--lime);box-shadow:inset 0 0 0 1px rgba(194,242,28,.24)}

#umfang .um-pk-note{max-width:760px;margin:22px 0 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:14px;line-height:1.55;color:var(--muted)}
#umfang.um-center .um-pk-note{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Breakpoints ---------- */
@media (max-width:1179px){
  #umfang .um-pk-grid--n4{--cols:2;max-width:880px}
}
@media (max-width:959px){
  #umfang .um-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Drei Pakete am Tablet: zwei nebeneinander, das dritte mittig darunter */
  #umfang .um-pk-grid--n3{--cols:4}
  #umfang .um-pk-grid--n3 .um-pk-item{grid-column:span 2}
  #umfang .um-pk-grid--n3 .um-pk-item:last-child{grid-column:2 / span 2}
}
@media (max-width:699px){
  #umfang .um-pk-grid--n2,#umfang .um-pk-grid--n3,#umfang .um-pk-grid--n4{--cols:1;max-width:none}
  #umfang .um-pk-grid--n3 .um-pk-item,#umfang .um-pk-grid--n3 .um-pk-item:last-child{grid-column:auto}
}
@media (max-width:719px){
  #umfang .um-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:40px}
  #umfang .um-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 20px 22px;border-radius:18px}
  #umfang .um-ico{grid-row:1 / span 2;width:44px;height:44px}
  #umfang .um-ico .v3-glassdot{border-radius:14px}
  #umfang .um-title{margin:2px 0 0;font-size:18px}
  #umfang .um-text{margin-top:6px;font-size:15px}
  #umfang .um-note{align-items:flex-start;margin-top:14px;padding:14px 18px 14px 14px;border-radius:18px;font-size:14.5px}
  #umfang .um-pk-head{margin-bottom:28px}
  #umfang .um-pk{padding:26px 22px 22px}
  #umfang .um-pk-amount{font-size:48px}
  #umfang .um-pk-price.is-text .um-pk-amount{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  #umfang .um-ico .v3-glassdot,#umfang .um-ico .v3-ico{transition:none}
}