/* Energie-App Familie Chagny: ein Stylesheet, mobile first, Glas-Optik. Abstände nur über den Takt (--t). */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("schrift/outfit.woff2") format("woff2");
}

:root {
    --t: 8px;
    --hintergrund: #07080c;
    --text: #f3f4f8;
    --gedaempft: #9a9fb0;
    --pv: #ffb340;
    --haus: #c58cff;
    --batterie: #3fdc9b;
    --netz: #4fa3ff;
    --fehler: #ff6b6b;
    --glas: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
    --glas-rand: rgba(255, 255, 255, 0.14);
    --glas-licht: rgba(255, 255, 255, 0.22);
    --radius: 28px;
    --schrift: "Outfit", -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--schrift);
    font-size: 16px;
    color: var(--text);
    background: var(--hintergrund);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Lichter im Hintergrund: drei weiche Farbflecken, die langsam kreisen. */
.licht {
    position: fixed;
    z-index: -1;
    width: 64vmax;
    height: 64vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.28;
    pointer-events: none;
    animation: kreisen 32s ease-in-out infinite alternate;
}
.licht-1 { top: -28vmax; left: -22vmax; background: var(--pv); }
.licht-2 { bottom: -34vmax; right: -24vmax; background: var(--netz); animation-delay: -11s; }
.licht-3 { top: 36vh; left: 40vw; width: 40vmax; height: 40vmax; background: var(--haus); opacity: 0.16; animation-delay: -22s; }

@keyframes kreisen {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(9vmax, 7vmax) scale(1.18); }
}

/* Glas: Verlauf, feiner Rand, Lichtkante oben, Unschärfe dahinter. */
.glas {
    position: relative;
    background: var(--glas);
    border: 1px solid var(--glas-rand);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 var(--glas-licht), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 24px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
}
.glas::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, 0.14), transparent 55%);
    pointer-events: none;
}

.kopf, main {
    width: min(100%, 760px);
    margin: 0 auto;
    padding-left: calc(var(--t) * 2);
    padding-right: calc(var(--t) * 2);
}
.kopf {
    padding-top: calc(var(--t) * 3 + env(safe-area-inset-top));
    padding-bottom: calc(var(--t) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
main {
    padding-bottom: calc(var(--t) * 6 + env(safe-area-inset-bottom));
    display: grid;
    gap: calc(var(--t) * 2);
}

.datum { margin: 0; font-size: 14px; font-weight: 500; color: var(--gedaempft); }
h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h2 {
    margin: 0 0 calc(var(--t) * 2);
    font-size: 13px;
    font-weight: 600;
    color: var(--gedaempft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.icon { width: 22px; height: 22px; }

.rund {
    width: calc(var(--t) * 6);
    height: calc(var(--t) * 6);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gedaempft);
    transition: transform 0.15s;
}
.rund:active { transform: scale(0.92); }

/* Status-Pille */
.pille {
    justify-self: start;
    margin: 0;
    padding: var(--t) calc(var(--t) * 2) var(--t) calc(var(--t) * 1.5);
    display: inline-flex;
    align-items: center;
    gap: var(--t);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gedaempft);
}
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gedaempft); }
.pille[data-zustand="live"] .punkt {
    background: var(--batterie);
    box-shadow: 0 0 0 0 rgba(63, 220, 155, 0.7);
    animation: puls 2s ease-out infinite;
}
.pille[data-zustand="alt"] .punkt { background: var(--fehler); }

@keyframes puls {
    to { box-shadow: 0 0 0 10px rgba(63, 220, 155, 0); }
}

/* Kacheln */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--t) * 2); }
.karte, .kachel {
    padding: calc(var(--t) * 2.5);
    animation: erscheinen 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kacheln .kachel:nth-child(2) { animation-delay: 0.06s; }
.kacheln .kachel:nth-child(3) { animation-delay: 0.12s; }
.kacheln .kachel:nth-child(4) { animation-delay: 0.18s; }
.fluss { animation-delay: 0.24s; }

@keyframes erscheinen {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
}

.kachel { overflow: hidden; transition: transform 0.2s; }
.kachel:active { transform: scale(0.98); }
.kachel::after {
    content: "";
    position: absolute;
    right: -30%;
    bottom: -45%;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--farbe);
    filter: blur(44px);
    opacity: 0.14;
    transition: opacity 0.8s;
    pointer-events: none;
}
.kachel.aktiv::after { opacity: 0.36; }
.pv { --farbe: var(--pv); }
.haus { --farbe: var(--haus); }
.batterie { --farbe: var(--batterie); }
.netz { --farbe: var(--netz); }

.kachel header {
    display: flex;
    align-items: center;
    gap: calc(var(--t) * 1.25);
    font-size: 14px;
    font-weight: 600;
    color: var(--gedaempft);
}

/* Farbiger Glas-Chip um ein Icon */
.chip {
    flex: none;
    width: calc(var(--t) * 4.5);
    height: calc(var(--t) * 4.5);
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--farbe);
    background: color-mix(in srgb, var(--farbe) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--farbe) 35%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px color-mix(in srgb, var(--farbe) 25%, transparent);
}
.chip .icon { width: 20px; height: 20px; }

.wert {
    position: relative;
    margin: calc(var(--t) * 2) 0 0;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.wert small { margin-left: calc(var(--t) * 0.75); font-size: 16px; font-weight: 500; color: var(--gedaempft); }

.neben {
    position: relative;
    margin: var(--t) 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gedaempft);
    min-height: 1.3em;
}

.funke {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: calc(var(--t) * 1.5);
}

.balken {
    position: relative;
    margin-top: calc(var(--t) * 3);
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.balken div {
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #22b877, var(--batterie), #a8ffd8);
    box-shadow: 0 0 16px rgba(63, 220, 155, 0.6);
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Energiefluss */
.fluss-bild { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; overflow: visible; }
.bahn { fill: none; stroke: var(--farbe); stroke-width: 2; stroke-opacity: 0.18; stroke-linecap: round; }
.teilchen circle { fill: var(--farbe); opacity: 0; transition: opacity 0.5s; }
.teilchen.an circle { opacity: 1; }
.teilchen[data-bahn="bahn-pv"] { --farbe: var(--pv); }
.teilchen[data-bahn="bahn-batterie"] { --farbe: var(--batterie); }
.teilchen[data-bahn="bahn-netz"] { --farbe: var(--netz); }
.teilchen[data-bahn="bahn-haus"] { --farbe: var(--haus); }
.mitte { fill: var(--text); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }
.knoten circle {
    fill: color-mix(in srgb, var(--farbe) 16%, rgba(255, 255, 255, 0.04));
    stroke: color-mix(in srgb, var(--farbe) 45%, transparent);
    stroke-width: 1;
    filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--farbe) 30%, transparent));
}
.knoten path, .knoten circle:not(:first-child), .knoten line, .knoten rect, .knoten polyline, .knoten polygon {
    stroke: var(--farbe);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.knoten text {
    fill: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
    font-family: var(--schrift);
    font-variant-numeric: tabular-nums;
}
.knoten text.links { text-anchor: start; }

/* Tageswerte */
.tagwerte { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--t) * 2); }
.tagwerte div {
    padding: calc(var(--t) * 2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.tagwerte dt { display: flex; align-items: center; gap: var(--t); font-size: 13px; font-weight: 500; color: var(--gedaempft); }
.tagwerte dt .chip { width: calc(var(--t) * 3.5); height: calc(var(--t) * 3.5); border-radius: 9px; box-shadow: none; }
.tagwerte dt .icon { width: 15px; height: 15px; }
.tagwerte dd {
    margin: calc(var(--t) * 1.5) 0 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.tagwerte small { margin-left: calc(var(--t) / 2); font-size: 13px; font-weight: 500; color: var(--gedaempft); }

/* Verlauf */
.legende {
    margin: 0 0 calc(var(--t) * 2);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--t) * 2);
    font-size: 13px;
    font-weight: 500;
    color: var(--gedaempft);
}
.legende li { display: flex; align-items: center; gap: var(--t); }
.legende li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 10px var(--farbe); }
.verlauf-rahmen { position: relative; }
canvas#verlauf { display: block; width: 100%; height: 240px; touch-action: pan-y; }
.hinweis {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 140px;
    padding: calc(var(--t) * 1.5) calc(var(--t) * 2);
    border-radius: 16px;
    font-size: 13px;
    pointer-events: none;
    transform: translate(-50%, 0);
    animation: erscheinen 0.2s both;
}
.hinweis[hidden] { display: none; }
.hinweis p { margin: 0; display: flex; justify-content: space-between; gap: calc(var(--t) * 2); color: var(--gedaempft); }
.hinweis p + p { margin-top: calc(var(--t) / 2); }
.hinweis .hinweis-zeit { margin-bottom: var(--t); font-weight: 600; color: var(--text); }
.hinweis b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hinweis p span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--t); border-radius: 50%; background: var(--farbe); }

.fuss { margin: var(--t) 0 0; text-align: center; font-size: 12px; color: var(--gedaempft); }
.gedaempft { color: var(--gedaempft); }

/* Anmeldung */
.anmeldung { display: grid; place-items: center; padding: calc(var(--t) * 2); }
.anmeldung-karte {
    width: min(100%, 380px);
    padding: calc(var(--t) * 5) calc(var(--t) * 3.5);
    text-align: center;
    animation: erscheinen 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.anmeldung-logo {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 24px;
    color: #1a1200;
    background: linear-gradient(135deg, var(--pv), #ffd97a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 40px rgba(255, 179, 64, 0.4);
}
.anmeldung-logo .icon { width: 40px; height: 40px; stroke-width: 2.2; }
.anmeldung h1 { margin-top: calc(var(--t) * 3); }
.anmeldung p { margin: var(--t) 0 0; font-weight: 500; }
.anmeldung form { position: relative; margin-top: calc(var(--t) * 4); display: grid; gap: calc(var(--t) * 1.5); text-align: left; }
.anmeldung label { font-size: 13px; font-weight: 500; color: var(--gedaempft); }
.anmeldung input {
    width: 100%;
    padding: calc(var(--t) * 2) calc(var(--t) * 2.5);
    font: inherit;
    font-size: 18px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--glas-rand);
    border-radius: 16px;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.anmeldung input:focus { border-color: var(--pv); box-shadow: 0 0 0 4px rgba(255, 179, 64, 0.22); }
.anmeldung button {
    margin-top: var(--t);
    padding: calc(var(--t) * 2.25);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    color: #1a1200;
    background: linear-gradient(135deg, var(--pv), #ffd97a);
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 32px rgba(255, 179, 64, 0.35);
    transition: transform 0.15s;
}
.anmeldung button:active { transform: scale(0.98); }
.fehler { margin: 0; color: var(--fehler); font-size: 14px; }

@media (min-width: 680px) {
    .kacheln { grid-template-columns: repeat(4, 1fr); }
    .wert { font-size: 34px; }
    .tagwerte { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition: none !important; }
}