:root{--sp-blau: #003769;--sp-rot: #d2003c;--sp-rot-hell: #ff4669;--sp-text: #333333;--sp-grau-hell: #f2f2f2;--sp-weiss: #ffffff;--sp-blau-hell: #6f9cc4;--sp-linie: #dcdfe4;--radius: 4px;--schrift: "HelveticaNowText", "Helvetica Neue", Arial, sans-serif;--schrift-headline: "HelveticaNeueLTStd77-BdCn", "Helvetica Neue", Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--sp-grau-hell);color:var(--sp-text);font-family:var(--schrift);font-size:16px;line-height:1.45;overflow-x:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3{font-family:var(--schrift-headline);font-stretch:condensed;font-weight:700;color:var(--sp-blau);line-height:1.1;margin:0}.app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--sp-weiss);display:flex;flex-direction:column}.banner{background:var(--sp-rot);color:var(--sp-weiss);font-size:12px;padding:6px 16px;text-align:center}.kopf{background:var(--sp-blau);color:var(--sp-weiss);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:4px solid var(--sp-rot)}.kopf__titel{background:none;border:0;padding:0;color:var(--sp-weiss);font-family:var(--schrift-headline);font-stretch:condensed;font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em}.umschalter{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.umschalter span{opacity:.6}.umschalter span.an{opacity:1;font-weight:700}.umschalter input{position:absolute;opacity:0;width:1px;height:1px}.umschalter__bahn{position:relative;width:34px;height:18px;border-radius:9px;background:#fff4;opacity:1!important}.umschalter__bahn:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sp-weiss);transition:transform .2s}.umschalter input:checked+.umschalter__bahn{background:var(--sp-rot)}.umschalter input:checked+.umschalter__bahn:after{transform:translate(16px)}.umschalter input:focus-visible+.umschalter__bahn{outline:2px solid var(--sp-weiss);outline-offset:2px}.inhalt{flex:1;padding:20px 16px 28px}.start h1{font-size:30px}.start__lead{margin:10px 0 18px}.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kachel{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--sp-grau-hell);border:2px solid transparent;border-radius:var(--radius);padding:14px 6px 12px;transition:border-color .15s,transform .15s}.kachel:hover,.kachel:focus-visible{border-color:var(--sp-rot);outline:none;transform:translateY(-2px)}.kachel__name{font-weight:700;color:var(--sp-blau);font-size:14px;line-height:1.2;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;max-width:100%}.kachel__info{font-size:12px;color:#666}.flasche{width:34px;height:86px}.flasche--gross{width:46px;height:116px;flex:none}.code{margin-top:24px;padding-top:18px;border-top:1px solid var(--sp-linie)}.code label{font-weight:700;color:var(--sp-blau);display:block;margin-bottom:6px}.code__hilfe{font-weight:400;color:#666;font-size:13px}.code__zeile{display:flex;gap:8px}.code__zeile input,.chat__eingabe input{flex:1;min-width:0;padding:11px 12px;border:1px solid #b9bec6;border-radius:var(--radius);background:var(--sp-weiss)}.code__zeile input:focus,.chat__eingabe input:focus,select:focus{outline:2px solid var(--sp-blau);outline-offset:1px}.code__fehler{color:var(--sp-rot);margin:8px 0 0;font-size:14px}.code__beispiele{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:13px;color:#666}.code__format{font-size:12px;color:#888;margin:8px 0 0}.knopf{background:var(--sp-rot);color:var(--sp-weiss);border:0;border-radius:var(--radius);padding:10px 18px;font-weight:700;transition:background .15s}.knopf:hover:not(:disabled){background:var(--sp-rot-hell)}.knopf:disabled{background:#c9c9c9;cursor:default}.chip{background:var(--sp-weiss);border:1px solid var(--sp-blau);color:var(--sp-blau);border-radius:999px;padding:6px 12px;font-size:14px;text-align:left}.chip:hover:not(:disabled){background:var(--sp-blau);color:var(--sp-weiss)}.chip:disabled{opacity:.5;cursor:default}.chip--klein{font-size:12px;padding:3px 9px;font-variant-numeric:tabular-nums}.link{background:none;border:0;padding:0;color:var(--sp-rot);font-size:14px}.link:hover{color:var(--sp-rot-hell);text-decoration:underline}.produkt{display:flex;gap:14px;align-items:center;margin-bottom:14px}.produkt__text{min-width:0}.produkt h2{font-size:24px;margin:4px 0 8px}.produkt__werk{margin:0;color:#555}.quellwahl{display:flex;flex-wrap:wrap;gap:4px}.quellwahl button{border:1px solid var(--sp-blau);background:var(--sp-weiss);color:var(--sp-blau);padding:4px 10px;font-size:13px;border-radius:var(--radius)}.quellwahl button.an{background:var(--sp-blau);color:var(--sp-weiss)}.reiter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--sp-linie);margin:0 -16px 16px;padding:0 16px;position:sticky;top:0;background:var(--sp-weiss);z-index:2}.reiter button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 2px 8px;font-size:14px;font-weight:700;color:#666;white-space:nowrap}.reiter button.an{color:var(--sp-blau);border-bottom-color:var(--sp-rot)}.ansicht{animation:rein .25s ease-out}@keyframes rein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.demo-marke{display:inline-block;font-family:var(--schrift);font-size:10px;font-weight:400;letter-spacing:.03em;text-transform:uppercase;color:#777;border:1px solid #ccc;border-radius:3px;padding:0 4px;vertical-align:middle;white-space:nowrap}.abfuellung{background:var(--sp-grau-hell);border-left:4px solid var(--sp-rot);padding:8px 12px;margin-bottom:14px;font-size:14px}.fakten{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 16px}.fakten dt{font-weight:700;color:var(--sp-blau)}.fakten dd{margin:0}.karten-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:center;margin-bottom:8px}.entfernung label{font-size:13px;color:#666;display:block}.entfernung select{width:100%;padding:7px 6px;border:1px solid #b9bec6;border-radius:var(--radius);background:var(--sp-weiss);font-size:14px;margin:2px 0 8px}.entfernung__km{font-family:var(--schrift-headline);font-stretch:condensed;font-weight:700;font-size:34px;color:var(--sp-blau);line-height:1}.entfernung__text{font-size:13px;color:#666}.block{border-top:1px solid var(--sp-linie);padding-top:14px;margin-top:14px}.block h3{font-size:19px;margin-bottom:6px}.klartext{margin:0 0 10px;font-weight:700}.hinweis{font-size:13px;color:#555;background:var(--sp-grau-hell);padding:8px 10px;border-radius:var(--radius);margin:12px 0 0}.balken{margin:10px 0}.balken__kopf{display:flex;justify-content:space-between;gap:8px;font-size:14px}.balken__wert{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.balken__vgl{color:var(--sp-blau-hell)}.balken__spur{height:10px;background:var(--sp-grau-hell);border-radius:5px;overflow:hidden;margin-top:3px}.balken__spur--vgl{margin-top:3px}.balken__fuellung{height:100%;background:var(--sp-blau);border-radius:5px;animation:wachsen .6s ease-out;transform-origin:left}.balken__fuellung--vgl{background:var(--sp-blau-hell)}.balken__hinweis{font-size:12px;color:#666;margin-top:2px}@keyframes wachsen{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.rezyklat{display:flex;gap:14px;align-items:center}.rezyklat p{margin:0;font-size:14px}.rezyklat__ring{flex:none;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sp-rot) calc(var(--anteil) * 1%),var(--sp-grau-hell) 0);position:relative}.rezyklat__ring:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:50%;background:var(--sp-weiss)}.rezyklat__ring span{position:relative;font-weight:700;color:var(--sp-blau);font-size:15px}.karte{margin:12px 0 0}.karte svg{width:100%;height:auto;display:block;max-height:360px}.karte--klein svg{max-height:220px}.karte figcaption{font-size:12px;color:#777;text-align:center;margin-top:4px}.karte__land{fill:var(--sp-grau-hell);stroke:#c3c8cf;stroke-width:1}.karte__route{fill:none;stroke:var(--sp-rot);stroke-width:2;stroke-dasharray:5 4;animation:laufen 1.2s linear infinite}@keyframes laufen{to{stroke-dashoffset:-18}}.karte__punkt circle{stroke:var(--sp-weiss);stroke-width:2}.karte__punkt--quelle circle{fill:var(--sp-blau)}.karte__punkt--quelle2 circle{fill:var(--sp-blau-hell)}.karte__punkt--werk circle{fill:var(--sp-rot)}.karte__punkt--ort circle{fill:var(--sp-weiss);stroke:var(--sp-rot);stroke-width:2.5}.karte__punkt text{font-size:12px;font-weight:700;fill:var(--sp-blau);paint-order:stroke;stroke:var(--sp-weiss);stroke-width:3px;stroke-linejoin:round}.einleitung{margin:0 0 14px}.kreislauf{list-style:none;margin:0;padding:0;position:relative}.kreislauf:before,.kreislauf:after{content:"";position:absolute;left:15px;top:16px;width:3px;bottom:30px;background:var(--sp-linie)}.kreislauf:after{background:var(--sp-rot);bottom:auto;height:calc((100% - 46px) * var(--fortschritt));transition:height .6s ease-out}.station{position:relative;display:flex;gap:14px;padding-bottom:16px;opacity:.35;transition:opacity .4s}.station--an{opacity:1}.station__punkt{flex:none;width:33px;height:33px;border-radius:50%;background:var(--sp-weiss);border:3px solid var(--sp-linie);display:grid;place-items:center;font-weight:700;color:var(--sp-blau);position:relative;z-index:1;transition:border-color .4s,background .4s,color .4s}.station--an .station__punkt{border-color:var(--sp-rot);background:var(--sp-rot);color:var(--sp-weiss)}.station__inhalt{min-width:0;padding-top:4px}.station__kopf{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}.station__kopf strong{color:var(--sp-blau);font-size:17px}.station__ort{font-size:13px;color:#666}.station p{margin:2px 0 4px}.station__zahl{font-size:14px}.station__zahl b{color:var(--sp-rot);font-size:17px}.leiste{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;font-size:12px}.leiste__schritt{background:var(--sp-grau-hell);color:var(--sp-blau);padding:3px 8px;border-radius:999px;font-weight:700;opacity:0;animation:einblenden .3s ease-out forwards}.leiste__schritt:not(:last-child):after{content:" →";color:var(--sp-rot)}@keyframes einblenden{to{opacity:1}}.vgl-wahl{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--sp-blau);font-size:18px}.vgl-wahl__vs{color:var(--sp-rot);font-size:14px}.vgl-wahl select{padding:6px 8px;border:1px solid #b9bec6;border-radius:var(--radius);background:var(--sp-weiss);font-weight:700;color:var(--sp-blau);min-width:0}.vgl-satz{font-size:17px;border-left:4px solid var(--sp-rot);padding:4px 0 4px 12px;margin:14px 0}.vgl-legende{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px}.punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}.punkt--a{background:var(--sp-blau)}.punkt--b{background:var(--sp-blau-hell)}.vgl-geschmack{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.vgl-geschmack>div{background:var(--sp-grau-hell);padding:10px;border-radius:var(--radius)}.vgl-geschmack strong{color:var(--sp-blau)}.vgl-geschmack p{margin:4px 0 0;font-size:14px}.leer{background:var(--sp-grau-hell);padding:14px;border-radius:var(--radius)}.chat__offline{background:#fff4f6;border:1px solid #f3b6c6;color:#7a0023;padding:10px 12px;border-radius:var(--radius);font-size:14px;margin:0 0 12px}.chat__offline code{background:#fffa;padding:0 3px}.chat__verlauf{display:flex;flex-direction:column;gap:10px}.blase{max-width:88%;padding:10px 12px;border-radius:12px;overflow-wrap:anywhere;white-space:pre-line}.blase--flasche{background:var(--sp-grau-hell);border-bottom-left-radius:3px;align-self:flex-start}.blase--nutzer{background:var(--sp-blau);color:var(--sp-weiss);border-bottom-right-radius:3px;align-self:flex-end}.blase--hinweis{background:#fff4f6;color:#7a0023;align-self:flex-start;font-size:14px}.blase--tippt{display:flex;gap:4px;padding:14px}.blase--tippt span{width:7px;height:7px;border-radius:50%;background:#999;animation:tippen 1s infinite}.blase--tippt span:nth-child(2){animation-delay:.15s}.blase--tippt span:nth-child(3){animation-delay:.3s}@keyframes tippen{50%{transform:translateY(-4px);opacity:.5}}.antwort{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.antwort .karte{width:88%;max-width:280px;margin-top:6px}.antwort__fuss{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:12px;color:#777}.antwort__quelle{font-style:italic}.antwort__daumen button{background:none;border:1px solid transparent;border-radius:4px;padding:0 4px;filter:grayscale(1);opacity:.55;font-size:14px}.antwort__daumen button.an,.antwort__daumen button:hover{filter:none;opacity:1;border-color:var(--sp-linie)}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 10px}.chat__eingabe{display:flex;gap:8px}.chat__regel{font-size:12px;color:#777;margin:8px 0 0}.feedback{margin-top:16px;font-size:13px;border-top:1px solid var(--sp-linie);padding-top:10px}.feedback summary{cursor:pointer;color:var(--sp-blau);font-weight:700}.feedback ul{padding-left:0;list-style:none}.feedback li{padding:3px 0}.fuss{background:var(--sp-grau-hell);padding:14px 16px 20px;font-size:12px;color:#666;border-top:1px solid var(--sp-linie)}.fuss__demo{margin:0 0 10px}.fuss__logo{display:flex;align-items:center;gap:8px}.fuss__logo img{opacity:.85}@media(min-width:480px){.start h1{font-size:36px}.flasche{width:40px;height:100px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.leiste__schritt{opacity:1}}