save

2026-08-14 13:51:36 +02:00
parent b6ed4118d1
commit e217d1a97f
9 changed files with 553 additions and 40 deletions
@@ -0,0 +1,138 @@
+import { Link } from "react-router-dom"
+import { BarChart3, KeyRound, Puzzle, RadioTower, ShieldCheck } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { CtaBanner } from "@/components/gebos/cta-banner"
+import { IconBadge } from "@/components/gebos/icon-tile"
+import { Section, SectionHeading } from "@/components/gebos/section"
+import {
+  AssetRender,
+  renders,
+  vectors,
+} from "@/components/gebos/site-assets"
+import {
+  HEIZKOSTENV,
+  TopicCards,
+  WissenArticle,
+  WissenRelated,
+  type Topic,
+} from "@/pages/wissen/wissen-article"
+
+const requirements: Topic[] = [
+  {
+    icon: <BarChart3 />,
+    title: "Unterjährige Verbrauchsinformation",
+    body: "Monatliche Verbrauchsinformationen auf Basis der erfassten Verbrauchs- und Ablesewerte – zur Umsetzung der Anforderungen des § 6a HeizkostenV.",
+    source: { cite: "§ 6a HeizkostenV", href: `${HEIZKOSTENV}/__6a.html` },
+  },
+  {
+    icon: <RadioTower />,
+    title: "Fernablesbarkeit",
+    body: "Verbrauchswerte werden ohne Zugang zu den einzelnen Wohnungen ausgelesen und zentral für Verbrauchsinformation und Abrechnung bereitgestellt.",
+  },
+  {
+    icon: <Puzzle />,
+    title: "Interoperable Messtechnik",
+    body: "Die eingesetzten Verbrauchserfassungsgeräte sind OMS-fähig. Soweit für die jeweilige Ausstattung anwendbar, erfüllt die gelieferte Messtechnik die Anforderungen an Interoperabilität und Stand der Technik nach § 5 HeizkostenV.",
+    source: { cite: "§ 5 HeizkostenV", href: `${HEIZKOSTENV}/__5.html` },
+  },
+]
+
+/**
+ * Hero art: the UVI pane as the subject with the consumption donut and the
+ * UVI badge beside it – what the requirements produce for the resident.
+ * Decorative; the copy carries the meaning.
+ */
+function RequirementsHeroArt() {
+  return (
+    <div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
+      <img
+        src={vectors.uviBadge}
+        alt=""
+        className="absolute top-0 right-[4%] w-[22%]"
+      />
+      <AssetRender
+        render={renders.uviGlassPane}
+        alt=""
+        className="mx-auto w-[74%]"
+        loading="eager"
+      />
+      <AssetRender
+        render={renders.glassDonutShadow}
+        alt=""
+        className="absolute bottom-0 left-0 w-[30%]"
+      />
+    </div>
+  )
+}
+
+export default function GesetzlicheAnforderungenPage() {
+  return (
+    <WissenArticle
+      breadcrumb="Gesetzliche Anforderungen"
+      eyebrow="Technik & Anforderungen"
+      title="Gesetzliche Anforderungen an den Messbetrieb"
+      tagline="Für den Messbetrieb gebaut."
+      lead="GebOS verbindet fernablesbare Messtechnik, Verbrauchsinformationen und Abrechnung in einer klaren technischen und organisatorischen Struktur."
+      visual={<RequirementsHeroArt />}
+    >
+      <Section className="pt-2 sm:pt-4 lg:pt-6">
+        <SectionHeading
+          eyebrow="Anforderungen"
+          title="Was die Heizkostenverordnung verlangt"
+          lead="Verbrauchsinformation, Fernablesbarkeit und Interoperabilität sind keine getrennten Themen – sie hängen an derselben Messtechnik und derselben Datenerfassung."
+        />
+        <TopicCards
+          items={requirements}
+          className="sm:grid-cols-2 lg:grid-cols-3"
+        />
+
+        <aside className="mt-6 flex flex-col gap-5 rounded-3xl border border-brand-200 bg-brand-50/50 p-6 sm:flex-row sm:items-center sm:gap-6 sm:p-8">
+          <IconBadge
+            variant="solid"
+            shape="squircle"
+            size="lg"
+            className="shadow-band"
+          >
+            <KeyRound />
+          </IconBadge>
+          <div className="min-w-0 flex-1">
+            <h3 className="text-base font-bold text-balance text-navy sm:text-lg">
+              Ein Wechsel des Messdienstleisters bleibt möglich
+            </h3>
+            <p className="mt-2 text-sm leading-relaxed text-pretty text-navy/80 sm:text-base">
+              Die AES-Schlüssel der Verbrauchserfassungsgeräte bleiben verfügbar
+              und können dem Gebäudeeigentümer bereitgestellt werden. Dadurch
+              bleibt ein späterer Wechsel des Messdienstleisters technisch
+              möglich.
+            </p>
+          </div>
+        </aside>
+      </Section>
+
+      <WissenRelated
+        to="/wissen/datenschutz-sicherheit"
+        title="Datenschutz und technische Sicherheit"
+        summary="Datenstandort, verschlüsselte Übertragung, Rollen und Zugriffsrechte sowie kontrollierbare Geräteschlüssel."
+      />
+
+      <Section className="pt-0 sm:pt-0 lg:pt-0">
+        <CtaBanner
+          icon={<ShieldCheck />}
+          title="Erfüllt Ihr Gebäude die Anforderungen bereits?"
+          description="Wir prüfen Ausstattung, Fernablesbarkeit und Verbrauchsinformation für Ihr Gebäude konkret."
+          actions={
+            <>
+              <Button asChild variant="inverse" size="lg">
+                <Link to="/kontakt">Kontakt aufnehmen</Link>
+              </Button>
+              <Button asChild variant="inverseOutline" size="lg">
+                <Link to="/konfigurator">Preis berechnen</Link>
+              </Button>
+            </>
+          }
+        />
+      </Section>
+    </WissenArticle>
+  )
+}