@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sourcesans-400.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sourcesans-600.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sourcesans-700.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--nacht);
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
  touch-action:manipulation;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--nacht);
  color:var(--text);
  font-family:var(--font);
  font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{line-height:1.15;margin:0;text-wrap:balance}
p{margin:0 0 1rem}
a{color:var(--signal)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}
.mitte{width:var(--breite);margin-inline:auto}
.schmal{width:var(--breite-schmal);margin-inline:auto}
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.sprung{
  position:absolute;left:50%;z-index:100;
  transform:translate(-50%,-150%);
  background:var(--signal);color:var(--signal-schatten);
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius) var(--radius);
  font-weight:600;text-decoration:none;transition:transform .2s;
}
.sprung:focus{transform:translate(-50%,0)}
.kopf{
  position:fixed;inset:0 0 auto;z-index:50;
  height:var(--kopf-hoehe);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-inline:max(1.25rem,calc((100% - 72rem)/2));
}
.kopf::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0 0 calc(-1px - var(--kopf-aus, 0px));
  background:var(--nacht);
  background:color-mix(in srgb, var(--nacht) 82%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 20px -14px var(--schwebe);
}
.kopf::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  bottom:calc(-1px - var(--kopf-aus, 0px));
  background:var(--linie);
  background:linear-gradient(90deg, transparent, var(--linie) 15%, var(--linie) 85%, transparent);
}
.wortmarke{
  color:var(--text);text-decoration:none;
  font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  line-height:1.3;
}
.kopf .wortmarke{transform-origin:0 0}
@media print{.kopf .wortmarke{transform:none !important}}
@media print{.kopf{position:absolute}}
.kopf-ruhig .kopf .wortmarke{opacity:0;visibility:hidden}
.kopf-ruhig .kopf.marke-da .wortmarke{opacity:1;visibility:visible}
.kopf-ruhig.kopf-bereit .kopf .wortmarke{transition:opacity .3s,visibility 0s linear .3s}
.kopf-ruhig.kopf-bereit .kopf.marke-da .wortmarke{transition:opacity .3s,visibility 0s}
.wortmarke span{color:var(--text-leise);font-weight:400}
.wortmarke .zeichen{
  display:inline-block;height:1.1em;width:calc(1.1em * 52 / 44.5);
  vertical-align:-.19em;margin-right:.65em;
}
.wortmarke{white-space:nowrap}
@media (max-width:21.8em){.wortmarke .zeichen{display:none}}
.zeichen .z{fill:var(--text)}
.zeichen .k,.zeichen .f{stroke:var(--signal)}
.zeichen .a{fill:var(--signal)}
@media (forced-colors:active){
  .zeichen .z,.zeichen .a{fill:CanvasText}
  .zeichen .k,.zeichen .f{stroke:CanvasText}
}
@media print{.wortmarke .zeichen{display:none}}
.pille{
  display:inline-block;text-decoration:none;
  color:var(--signal);border:1px solid var(--signal);
  border-radius:999px;padding:.35rem .9rem;
  font-size:.9rem;font-weight:600;line-height:1.3;
  transition:background-color .2s,color .2s;
}
.pille:hover{background:var(--signal);color:var(--signal-schatten)}
.auftakt{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  padding:calc(var(--kopf-hoehe) + 1.6rem) 1.25rem 3rem;
  --bildzug:0;
}
.auftakt-text{display:flex;flex-direction:column;align-items:center}
.auftakt-bild{
  position:relative;z-index:0;
  width:fit-content;max-width:min(100%,58rem);margin:1.8rem auto 0;
}
.auftakt-bild:has(.dia-wahl){display:flex;flex-direction:column}
.auftakt-bild .dia-wahl{order:1}
.auftakt-bild .dias{opacity:calc(1 - .5 * var(--bildzug))}
.auftakt-bild .dias:focus-within{opacity:1}
.auftakt-bild img{
  width:auto;max-width:100%;height:auto;
  max-height:min(34svh,340px);
  object-fit:contain;display:block;margin-inline:auto;
}
.auftakt-bild .bild-link{display:block;overflow:hidden;cursor:zoom-in}
.auftakt-bild .auto,.auftakt-bild .speicher{
  display:block;
  transform:scale(calc(1 + var(--bildzug) * .3));
  transform-origin:var(--paketmitte);
}
.auftakt-bild .speicher{--paketmitte:30% 60%}
.dias{position:relative;display:grid}
.dia{grid-area:1/1;min-width:0;position:relative;isolation:isolate}
.dia--hell::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom, var(--nacht) 0, transparent 30%);
}
.dia:not(.an){display:none}
.wechsel .dia{display:block;visibility:hidden}
.wechsel .dia.an{visibility:visible;z-index:1}
@keyframes dia-rein{from{opacity:var(--ab,0);pointer-events:none}to{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion:no-preference){
  .animiert .wechsel .dia{transition:visibility 0s linear 1.2s}
  .animiert .wechsel .dia.an{transition:none}
  .animiert .wechsel .dia.an.rein{animation:dia-rein 1.2s ease both}
}
.dia-wahl{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.9rem}
.dia-reihe{display:flex;gap:.4rem}
.dia-reihe [role="tab"]{
  position:relative;overflow:hidden;min-height:2rem;padding:.3rem .95rem;
  font:inherit;font-size:.85rem;font-weight:600;line-height:1.2;
  color:var(--text-leise);background:transparent;
  border:1px solid var(--linie);border-radius:999px;cursor:pointer;
}
.dia-reihe [role="tab"]:hover{color:var(--text);border-color:var(--strich)}
.dia-reihe [role="tab"][aria-selected="true"]{color:var(--text);background:var(--signal-hauch);border-color:var(--signal)}
.dia-reihe [role="tab"]:focus-visible{border-radius:999px}
@media (forced-colors:active){
  .dia-reihe [role="tab"][aria-selected="true"]{border-color:Highlight}
  .dia-reihe [role="tab"][aria-selected="true"]::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:Highlight;forced-color-adjust:none;
  }
}
.dia-balken{display:none}
.animiert .dia-balken{
  display:block;position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform-origin:left center;transform:scaleX(var(--takt,0));
}
.animiert .dia-reihe [role="tab"]:not([aria-selected="true"]) .dia-balken,
.dia-steht .dia-balken{visibility:hidden}
.dia-pause .dia-balken{opacity:.45}
.dia-takt{
  display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;padding:0;flex:none;
  color:var(--text-leise);background:none;
  border:1px solid var(--linie);border-radius:50%;cursor:pointer;
}
.dia-takt:hover{color:var(--text);border-color:var(--strich)}
.dia-takt:focus-visible{border-radius:50%}
.dia-takt[hidden]{display:none}
.dia-takt svg{width:.65rem;height:.65rem;fill:currentColor}
.dia-reihe [role="tab"],.dia-takt{scroll-margin-top:calc(var(--kopf-hoehe) + 1rem)}
.dias::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;
  background:
    linear-gradient(to right, var(--nacht) 0, transparent 10%, transparent 90%, var(--nacht) 100%),
    linear-gradient(to bottom, var(--nacht) 0, transparent 12%, transparent 80%, var(--nacht) 100%);
}
.ki-etikett{
  position:absolute;right:.6rem;bottom:.6rem;z-index:3;pointer-events:none;
  padding:.05rem .5rem;border-radius:999px;
  background:var(--nacht-schleier);border:1px solid var(--linie);
  color:var(--text-leise);font-size:.72rem;font-weight:600;letter-spacing:.04em;line-height:1.5;
}
.auto{position:relative;--paketmitte:62% 58%}
.auto-licht{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  mix-blend-mode:screen;mix-blend-mode:plus-lighter;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
@media (prefers-reduced-motion:no-preference){
  .animiert .auto-module,.animiert .auto-schein{
    -webkit-mask-image:url(../bilder/auto-maske-module.webp);mask-image:url(../bilder/auto-maske-module.webp);
  }
  .animiert .auto-leitungen{
    -webkit-mask-image:url(../bilder/auto-maske-leitungen.webp);mask-image:url(../bilder/auto-maske-leitungen.webp);
  }
}
@media (forced-colors:active){.auto-licht{display:none}}
.auto-module{
  background:linear-gradient(100deg,transparent 40%,var(--strom-hell) 47%,var(--strom-hell) 53%,transparent 60%);
  background-size:300% 100%;background-position:25% 0;
}
.auto-schein{background:var(--strom)}
@property --ring{syntax:'<percentage>';inherits:false;initial-value:0%}
.auto-leitungen{
  --ring:0%;
  background:radial-gradient(circle farthest-corner at var(--paketmitte),
    transparent calc(var(--ring) - 24%),
    var(--strom-hell) calc(var(--ring) - 10%),
    var(--strom) calc(var(--ring) - 3%),
    transparent calc(var(--ring) + 2%));
}
@keyframes auto-welle{
  0%{background-position:25% 0;opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{background-position:60% 0;opacity:0}
}
@keyframes auto-schein{
  0%{opacity:0}
  35%{opacity:.5}
  100%{opacity:0}
}
@keyframes auto-fluss{
  0%{--ring:0%;opacity:0}
  10%{opacity:1}
  80%{opacity:1}
  100%{--ring:110%;opacity:0}
}
@media (prefers-reduced-motion:no-preference){
  .animiert .auto.erwacht .auto-module{animation:auto-welle 1.1s ease-in-out .15s both}
  .animiert .auto.erwacht .auto-schein{animation:auto-schein 1s ease-out .95s both}
  .animiert .auto.erwacht .auto-leitungen{animation:auto-fluss 1.2s ease-out 1.2s both}
}
.bildgross{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:1rem;border:0;background:var(--nacht-schleier);color:var(--text);
}
.bildgross[open]{display:grid;place-items:center;grid-template-columns:minmax(0,1fr)}
.bildgross::backdrop{background:transparent}
.bildgross-rahmen{position:relative;max-width:100%}
.bildgross .auto,.bildgross .speicher-gross{display:block;border-radius:var(--radius);overflow:hidden}
.bildgross .speicher-gross{position:relative}
.bildgross .zelle-gross{display:block;position:relative}
.bildgross .zelle-gross img{border-radius:var(--radius)}
.bildgross [hidden]{display:none}
.bildgross img{display:block;width:auto;height:auto;max-width:min(100%,1672px);max-height:84vh}
.bildgross form{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.75rem}
.bildgross{cursor:zoom-out}
.bildgross-zu{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;padding:0;cursor:pointer;
  color:var(--signal);background:var(--nacht);
  border:1px solid var(--signal);border-radius:50%;
}
.bildgross-zu svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bildgross-zu:hover{background:var(--signal);color:var(--signal-schatten)}
.bildgross-zu:focus-visible{border-radius:50%}
.lupe{
  position:absolute;left:0;top:0;z-index:2;
  width:clamp(8.5rem,24vw,14rem);height:clamp(8.5rem,24vw,14rem);
  border:2px solid var(--signal);border-radius:50%;
  background-color:var(--nacht);background-repeat:no-repeat;
  box-shadow:0 .5rem 1.5rem var(--schwebe);
  pointer-events:none;
}
.bildgross .zelle-gross.lupe-an img{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}
.lupe-knopf{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;padding:0;cursor:pointer;
  color:var(--signal);background:var(--nacht);
  border:1px solid var(--signal);border-radius:50%;
}
.lupe-knopf svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lupe-knopf[aria-pressed="true"]{background:var(--signal);color:var(--signal-schatten)}
.lupe-knopf:focus-visible{border-radius:50%}
@media (forced-colors:active){
  .lupe{border-color:Highlight}
  .lupe-knopf[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
html:has(.bildgross[open]){overflow:hidden}
.auftakt-marke{display:flex;justify-content:center}
.auftakt{--marke-gross:min(3.08rem,calc((100vw - 3rem) / 9.64))}
.auftakt-marke .wortmarke{font-size:var(--marke-gross)}
@media screen{.kopf-zug .auftakt-marke .wortmarke{opacity:0}}
.status{margin:1.6rem 0 0;line-height:1.4}
.status strong,.status > span{display:block;text-wrap:balance}
.status strong{
  color:var(--signal);font-weight:700;line-height:1.08;letter-spacing:.01em;
  font-size:calc(var(--marke-gross) * .75);
}
.status > span{color:var(--text-leise);font-size:clamp(.95rem,.9rem + .25vw,1.1rem);margin-top:.2rem}
.status strong + span{margin-top:.8rem}
.scrollhinweis{
  margin-top:3rem;color:var(--text-still);font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.scrollhinweis::after{content:"";display:block;width:1px;height:2.5rem;margin:.75rem auto 0;background:linear-gradient(var(--text-still),transparent)}
@media (min-width:1100px){
  .auftakt{
    display:grid;align-items:center;
    grid-template-columns:minmax(18rem,26rem) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"marke marke" "text bild" "hinweis hinweis";
    gap:1.5rem 3.5rem;text-align:left;
    padding:calc(var(--kopf-hoehe) + .75rem) max(1.25rem,calc((100% - 72rem)/2)) 3rem;
  }
  .auftakt-marke{grid-area:marke;justify-content:flex-start}
  .status{margin:0}
  .auftakt-text{grid-area:text;align-items:flex-start}
  .auftakt-bild{grid-area:bild;justify-self:end;max-width:min(52vw,760px);margin:0}
  .auftakt-bild:has(.dia-wahl){margin-top:2.9rem}
  .auftakt-bild img{max-height:min(62svh,520px)}
  .auftakt .scrollhinweis{grid-area:hinweis;justify-self:center;margin:0}
}
@media (max-width:1099px){
  .auftakt{
    display:grid;justify-items:center;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(clamp(1.5rem,6.6svh,2.75rem),1fr) auto auto minmax(clamp(.75rem,2.5svh,1.25rem),1fr) auto;
    padding:calc(var(--kopf-hoehe) + 1rem) 1.25rem 1.5rem;
  }
  .auftakt-marke{grid-row:1}
  .auftakt-text{grid-row:3}
  .auftakt-bild{grid-row:4}
  .auftakt .scrollhinweis{grid-row:6}
  .status{margin-top:0}
  .auftakt-bild{margin-top:clamp(1rem,2.5svh,1.8rem)}
  .auftakt-bild img{max-height:min(30svh,340px)}
  .auftakt .scrollhinweis{margin-top:0}
  .auftakt .scrollhinweis::after{height:clamp(1.2rem,3svh,2.5rem)}
}
.zielgruppen{padding:clamp(3rem,9vh,5.5rem) 0;border-bottom:1px solid var(--linie);text-align:center}
.zielgruppen h2{font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);margin-bottom:2rem}
.zg-weiter{display:block;margin-top:.35rem;font-size:.62em;color:var(--text-leise)}
.netz-quelle{list-style:none;max-width:40rem;margin:0 auto 2.5rem;padding:0;text-align:left;color:var(--text-leise)}
.netz-quelle li{padding:.5rem 0;border-bottom:1px solid var(--linie)}
.netz-wer{color:var(--text);font-weight:600}
.netz-an .netz-quelle{display:none}
.vorteile{
  list-style:none;margin:0;padding:0;text-align:left;
  display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);
}
@media (min-width:600px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.vorteile{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vorteil{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  scroll-margin-top:calc(var(--kopf-hoehe) + 1rem);
}
.vorteil h3{font-size:1.1rem;color:var(--signal);margin:0 0 .4rem}
.vorteil p{margin:0;color:var(--text-leise)}
.zg-schluss{max-width:var(--breite-schmal);margin:clamp(3rem,8vh,5rem) auto 0}
.zg-name{
  margin:0;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);font-weight:600;line-height:1.3;
  color:var(--text);
}
.zg-name span{color:var(--text-leise);font-weight:400}
.zg-dach{margin:.9rem 0 0;color:var(--text-leise);font-size:.98rem;text-wrap:balance}
.zg-dach .zusammen,.status .zusammen{white-space:nowrap}
.domainpaket{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.1rem;margin-top:1rem;font-size:1rem}
.domainpaket-kiste{width:3.6rem;height:3.6rem;flex:none;overflow:visible}
.domainpaket-kiste path{fill:none;stroke:var(--strich);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.domainpaket-kiste text{fill:var(--signal);font-size:21px;font-weight:700;font-family:inherit}
.domainpaket-zeilen{
  display:grid;grid-template-columns:repeat(6,auto);column-gap:clamp(.5rem,1.6vw,.85rem);row-gap:.3rem;
  margin:0;text-align:left;line-height:1.35;
}
.domainpaket-zeilen b{color:var(--text);font-weight:600}
@media (max-width:30rem){.domainpaket{flex-direction:column}}
.domainpaket-zeilen span{color:var(--text-leise)}
@media (forced-colors:active){
  .domainpaket-kiste path{stroke:CanvasText}
  .domainpaket-kiste text{fill:CanvasText}
}
.zg-schluss::before{
  content:"";display:block;width:3.5rem;height:1px;margin:0 auto 1.4rem;
  background:var(--strich);
  background:linear-gradient(90deg, transparent, var(--strich), transparent);
}
.netz{max-width:52rem;margin:0 auto 2.5rem}
.netz-kopf{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.netz-bild{
  --netz-mitte:clamp(7.5rem,28.4vw - .7rem,22rem);
  position:relative;display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr) var(--netz-mitte) minmax(0,1fr);
}
.netz-linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.netz-spalte{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-around;gap:.15rem}
.netz-links{align-items:flex-end}
.netz-rechts{align-items:flex-start}
.netz-knoten{
  position:relative;overflow:hidden;
  max-width:100%;padding:.4rem .55rem;
  font:inherit;font-size:clamp(.875rem,.8rem + .3vw,1.05rem);font-weight:600;line-height:1.2;hyphens:manual;
  color:var(--text-leise);background:transparent;
  border:1px solid transparent;border-radius:8px;cursor:pointer;
  scroll-margin-top:calc(var(--kopf-hoehe) + 1rem);
}
@media (max-width:22.5em){.netz-knoten{font-size:.82rem;padding:.35rem .4rem}}
@media (max-width:22.5em){
  .netz-bild{--netz-mitte:clamp(2.75rem,30vw,7.5rem)}
  .netz-knoten{overflow-wrap:anywhere}
}
.netz-links .netz-knoten{text-align:right}
.netz-rechts .netz-knoten{text-align:left}
.netz-knoten.dabei{color:var(--text)}
.netz-knoten.fern{color:var(--text-still)}
.netz-knoten:hover{color:var(--text)}
.netz-knoten[aria-pressed="true"]{color:var(--text);background:var(--signal-hauch);border-color:var(--signal)}
.netz-knoten:focus-visible{border-radius:8px;outline-offset:1px}
.netz-balken{display:none}
.animiert .netz-balken{
  display:block;position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform-origin:left center;transform:scaleX(var(--takt,0));
}
.animiert .netz-knoten:not([aria-pressed="true"]) .netz-balken,
.netz-steht .netz-balken{visibility:hidden}
.netz-pause .netz-balken{opacity:.45}
.netz-grund{fill:none;stroke:var(--linie);stroke-width:1.25}
.netz-glut{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.netz-glut.an{stroke-dashoffset:0;opacity:1}
.netz-punkt{fill:var(--strich)}
.netz-punkt.an{fill:var(--signal)}
.netz-mitte{
  --nabe:clamp(2.75rem,2.2rem + 2vw,4rem);
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
}
.netz-ring{
  position:relative;display:grid;place-items:center;width:var(--nabe);height:var(--nabe);
  border:1.5px solid var(--strich);border-radius:50%;background:var(--nacht);
}
.netz-ring .zeichen{width:58%;height:auto;margin-top:4%}
.animiert .netz-ring{cursor:pointer}
.netz-steht .netz-ring{cursor:auto}
.netz-halt .netz-ring{border-color:var(--signal)}
@media (prefers-reduced-motion:no-preference){
  .animiert .netz-ring{transition:border-color .3s ease}
}
.netz-name{
  position:absolute;left:50%;top:calc(50% + var(--nabe) / 2 + .4rem);transform:translateX(-50%);
  white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.06em;line-height:1.3;color:var(--text);
}
.netz-name span{color:var(--text-leise);font-weight:400}
@media (max-width:34em){.netz-name{display:none}}
@media (forced-colors:active){
  .netz-grund{stroke:GrayText}
  .netz-glut{stroke:Highlight}
  .netz-balken{forced-color-adjust:none;background:Highlight}
  .netz-punkt{fill:GrayText}
  .netz-punkt.an{fill:Highlight}
  .netz-knoten[aria-pressed="true"]{border-color:Highlight}
}
@media print{
  .netz{display:none}
  .netz-an .netz-quelle{display:block}
  .vorteil{break-inside:avoid}
}
@media (prefers-reduced-motion:no-preference){
  .animiert .netz-knoten{transition:color .3s ease,background-color .3s ease,border-color .3s ease}
  .animiert .netz-punkt{transition:fill .3s ease}
  .animiert .netz-glut{transition:opacity .25s ease,stroke-dashoffset 0s linear .25s}
  .animiert .netz-glut.an{transition:stroke-dashoffset .5s ease-out var(--verzug,0s)}
}
.netz-sofort .netz-glut{transition:none !important}
.aussage{
  padding:clamp(4rem,12vh,9rem) 0;text-align:center;
}
.szene--haus + .aussage--auftritt{padding-top:clamp(3rem,8vh,5.5rem)}
.aussage p{
  margin:0 auto;width:var(--breite-schmal);
  font-size:clamp(1.4rem,1rem + 2.2vw,2.4rem);
  font-weight:600;line-height:1.3;
}
.aussage .zeile{display:block}
.animiert .aussage--auftritt .zeile{opacity:0;transform:translateY(.5em)}
.animiert .aussage--auftritt.da .zeile{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .animiert .aussage--auftritt.da .zeile{transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.25,.4,1)}
  .animiert .aussage--auftritt.da .zeile + .zeile{transition-delay:.28s}
}
@media print{.animiert .aussage--auftritt .zeile{opacity:1;transform:none}}
.st-bild{margin:0 auto clamp(2rem,6vh,3.5rem);width:min(44rem, 100% - 2.5rem)}
.speichertag{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.st-reihe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(.75rem,3vw,2rem)}
.st-diagramm{flex:1 1 13rem;min-width:0;padding-left:2.9rem}
.st-feld{position:relative}
.st-kurve{display:block;width:100%;height:auto;overflow:visible}
.st-y{
  position:absolute;right:100%;margin-right:.45rem;transform:translateY(-50%);
  font-size:.8rem;color:var(--text-leise);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.st-y--oben{top:calc(30 / 220 * 100%)}
.st-y--unten{top:calc(210 / 220 * 100%)}
.st-x{position:relative;height:1.3rem;margin-top:.15rem}
.st-x span{
  position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);
  font-size:.8rem;color:var(--text-leise);white-space:nowrap;
}
.st-nacht{fill:var(--nacht-tief)}
.st-hell{fill:var(--flaeche)}
.st-sonne{fill:var(--signal)}
.st-mond{fill:var(--signal-hell)}
.st-raster{stroke:var(--linie);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.st-achse{fill:none;stroke:var(--strich);stroke-width:1.5;vector-effect:non-scaling-stroke}
.st-unter{fill:var(--signal-hauch)}
.st-linie{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.st-kopf{fill:var(--signal)}
.st-akku{flex:none;width:clamp(2.6rem,7vw,4.2rem);text-align:center}
.st-akku svg{display:block;width:100%;height:auto}
.st-kappe,.st-koerper{fill:none;stroke:var(--strich);stroke-width:3}
.st-pegel{fill:var(--signal);opacity:.85}
.st-prozent{
  display:block;margin-top:.35rem;
  font-size:clamp(.85rem,.8rem + .3vw,1rem);font-weight:700;color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.st-bild figcaption{margin-top:.6rem;font-size:.85rem;color:var(--text-leise)}
.st-kopfzeile{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.animiert .st-reihe{cursor:pointer}
@media print{.st-kopfzeile{display:none}}
@media (forced-colors:active){
  .st-linie,.st-achse,.st-kappe,.st-koerper{stroke:CanvasText}
  .st-pegel,.st-kopf,.st-sonne{fill:Highlight}
  .st-hell{fill:Canvas}
  .st-nacht{fill:GrayText;fill-opacity:.25}
  .st-unter{fill:GrayText;fill-opacity:.3}
  .st-raster{stroke:GrayText}
  .st-mond{fill:CanvasText}
}
.speichertag .zeile:nth-child(3)::before{
  content:"";display:block;width:3.5rem;height:1px;margin:.55em auto .6em;
  background:var(--strich);
  background:linear-gradient(90deg, transparent, var(--strich), transparent);
}
@media (forced-colors:active){
  .zg-schluss::before,.speichertag .zeile:nth-child(3)::before{forced-color-adjust:none;background:GrayText}
}
.animiert .speichertag .zeile{opacity:0;transform:translateY(.5em)}
.animiert .speichertag.da .zeile{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .animiert .speichertag.da .zeile{transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.25,.4,1)}
  .animiert .speichertag.da .zeile:nth-child(2){transition-delay:.28s}
  .animiert .speichertag.da .zeile:nth-child(3){transition-delay:.56s}
}
@media print{.animiert .speichertag .zeile{opacity:1;transform:none}}
.partner{padding:clamp(4rem,12vh,8rem) 0 clamp(3rem,8vh,5rem);text-align:center;border-top:1px solid var(--linie)}
.partner h2{font-size:clamp(2rem,1.2rem + 4vw,3.6rem);font-weight:700}
.partner .lede{margin:1.2rem auto 0;max-width:34em;color:var(--text-leise);font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}
.wege{
  list-style:none;margin:3rem auto 0;padding:0;width:var(--breite);
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  text-align:left;
}
.wege li{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:1.25rem 1.35rem}
.wege h3{font-size:1.05rem;color:var(--signal);margin-bottom:.4rem}
.wege p{margin:0;color:var(--text-leise);font-size:.98rem}
.paket{
  margin:2.2rem auto 0;width:var(--breite-schmal);
  color:var(--text-leise);font-size:.98rem;
}
.paket .domainpaket{margin-top:0}
.paket-hinweis{margin:.9rem 0 0;color:var(--text-still);text-wrap:balance}
.knopf{
  display:inline-block;margin-top:2rem;
  background:var(--signal);color:var(--signal-schatten);
  text-decoration:none;font-weight:700;font-size:1.05rem;
  padding:.9rem 1.8rem;border-radius:var(--radius);
}
.knopf:hover{background:var(--signal-hell)}
.klarstellung{margin:3rem auto 0;width:var(--breite-schmal);color:var(--text-leise);font-size:1rem}
.abspann{
  padding:clamp(3rem,9vh,6rem) 0 clamp(3rem,8vh,5rem);
  border-top:1px solid var(--linie);
  text-align:center;
  --abspannzug:1;
}
.abspann h2{font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);margin:0}
.abspann-bild{width:min(var(--breite),1672px);margin:2.5rem auto 0}
.abspann-bild img{
  display:block;width:100%;height:auto;
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--flaeche);
  opacity:var(--abspannzug);
  transform:translateY(calc((1 - var(--abspannzug)) * 2rem));
}
.abspann-bild figcaption{
  margin:1rem auto 0;max-width:34em;font-size:.9rem;color:var(--text-leise);
  opacity:var(--abspannzug);
}
.abspann-bild figcaption > span{display:block;color:var(--text-leise)}
.abspann-bild img.vergroesserbar{cursor:zoom-in}
.abspann-bild img.vergroesserbar:focus-visible{outline-offset:3px}
.fuss{
  background:var(--nacht-tief);border-top:1px solid var(--linie);
  padding:2rem 0;color:var(--text-still);font-size:.9rem;
}
.fuss .mitte{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center}
.fuss a{color:var(--text-leise);text-decoration:none;border-bottom:1px solid var(--text-leise)}
.fuss a:hover{color:var(--signal);border-bottom-color:var(--signal)}
.textseite{padding:calc(var(--kopf-hoehe) + 3rem) 0 4rem}
.textseite h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.8rem);margin-bottom:.6rem}
.textseite h2{font-size:1.3rem;margin:2.5rem 0 .6rem;color:var(--signal)}
.textseite .lede{color:var(--text-leise);margin-bottom:2rem}
.textseite .stand{color:var(--text-still)}
.textseite dt{font-weight:600;margin-top:1.2rem}
.textseite dd{margin:.2rem 0 0;color:var(--text-leise)}
.textseite ul{color:var(--text-leise)}
.zurueck{display:inline-block;margin-top:3rem}
.kform{display:flex;flex-direction:column;gap:1.5rem;color-scheme:dark}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld label{font-weight:600}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:2.9rem;padding:.6rem .8rem;
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--flaeche);border:1px solid var(--strich);border-radius:8px;
}
.feld textarea{line-height:1.55;min-height:11rem;resize:vertical}
.feld select{cursor:pointer}
.feld select:invalid{color:var(--text-leise)}
.feld option{color:var(--text)}
.feld :is(input,select,textarea){scroll-margin-top:calc(var(--kopf-hoehe) + 3rem)}
.feld :is(input,select,textarea):focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-color:var(--signal)}
.feld [aria-invalid="true"]{border-color:var(--signal);border-width:2px}
.feld-fehler{margin:0;color:var(--signal);font-size:.95rem}
.kform-hinweis{margin:0;color:var(--text-leise);font-size:.95rem}
.kform .knopf{align-self:flex-start;margin-top:.25rem}
button.knopf{border:0;font-family:inherit;line-height:inherit;cursor:pointer}
.kform-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;white-space:nowrap}
.hinweis{
  margin:0 0 2rem;padding:1.25rem 1.4rem;
  background:var(--flaeche);border:1px solid var(--linie);
  border-left:4px solid var(--signal);border-radius:var(--radius);
}
.hinweis p{margin:0}
.hinweis p + p,.hinweis p + .hinweis-liste{margin-top:.6rem}
.hinweis-liste{margin:0;padding-left:1.2rem}
.hinweis-liste li + li{margin-top:.2rem}
.textseite .hinweis h2{margin:0 0 .5rem}
.hinweis .knopf{margin-top:1.5rem}