/* Block "Tipps zum Ausprobieren". Wird nur geladen, wenn die Seite den Block enthält. */
.anicap-tips{padding:64px 0 80px;--tv-cream:#f7f1e1;--tv-cream-dark:#e6d8aa;--tv-line:#cfc29c;--tv-panel:#eef4f8;--tv-track:#d3dfe8}
.anicap-tips__intro{max-width:768px;margin:0 auto 56px;text-align:center}
.anicap-tips__intro h2{color:var(--anicap-blue);margin-bottom:16px}
.anicap-tips__lead{font-weight:600}

/* Aufbau: Wegweiser links, Tipps rechts */
.anicap-tips__layout{display:grid;gap:40px}
.anicap-tips__rail ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.anicap-tips__rail a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 8px;border:1px solid var(--tv-track);border-radius:50px;font-weight:500;transition:background .18s,border-color .18s,color .18s}
.anicap-tips__rail a:hover{border-color:var(--anicap-blue)}
.anicap-tips__rail-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tv-panel);color:var(--anicap-blue);font-size:14px;font-weight:600;transition:background .18s,color .18s}
.anicap-tips__rail a.is-active{background:var(--anicap-blue);border-color:var(--anicap-blue);color:#fff}
.anicap-tips__rail a.is-active .anicap-tips__rail-dot{background:#fff;color:var(--anicap-blue)}

.anicap-tips__station + .anicap-tips__station{margin-top:64px}
.anicap-tips__station-title{display:flex;align-items:center;gap:16px;margin:0 0 32px!important;color:var(--anicap-blue)}
.anicap-tips__station-title span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--anicap-blue);color:#fff;font-size:18px;line-height:1}
.anicap-tips__tips{list-style:none;margin:0;padding:0;display:grid;gap:48px}
.anicap-tip{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.anicap-tip__number{color:var(--anicap-red);font-size:28px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums}
.anicap-block h4.anicap-tip__title{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600}
.anicap-tip__text{max-width:640px}

/* Interaktive Darstellungen */
.anicap-tipviz{margin-top:24px;padding:24px;border-radius:20px;background:var(--tv-panel);display:grid;gap:20px}
.anicap-tipviz[hidden]{display:none}
.anicap-tipviz__stage svg{width:100%;max-width:420px;height:auto;margin:0 auto;display:block;overflow:visible}
.anicap-tipviz__controls{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.anicap-tipviz__controls>label,.anicap-tipviz__controls>legend{display:flex;justify-content:space-between;gap:16px;font-weight:600;padding:0}
.anicap-tipviz__controls>legend{float:none;width:100%}
.anicap-tipviz__controls>label:not(:first-child){margin-top:8px}
.tv-out{font-weight:600;color:var(--anicap-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.anicap-tipviz__result{min-height:48px;margin:0;font-weight:500}
.anicap-tipviz__note{margin:-8px 0 0;color:#6b7b88;font-size:12px;line-height:18px}

/* Gemeinsame SVG-Elemente */
.tv-shadow{fill:#15324b;opacity:.1}
.tv-body{fill:var(--tv-body,var(--tv-cream));stroke:var(--tv-line);stroke-width:1.5;transition:fill .25s}
.tv-ash{fill:none;stroke:#8c8f94;stroke-width:3;stroke-linecap:round;opacity:.35}
.tv-label{fill:#456;font-size:12px;font-weight:500}

/* Regler */
.tv-range{-webkit-appearance:none;appearance:none;width:100%;height:12px;margin:10px 0;border-radius:6px;background:var(--tv-track);cursor:pointer}
.tv-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--anicap-blue);box-shadow:0 2px 6px #0a2a4a33;cursor:grab}
.tv-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--anicap-blue);box-shadow:0 2px 6px #0a2a4a33;cursor:grab}
.tv-range::-moz-range-track{background:transparent}
.tv-range:focus-visible{outline:3px solid var(--anicap-red);outline-offset:6px}
.tv-range--ripening{background:linear-gradient(90deg,var(--anicap-sky) 0 15%,#a9c58f 15% 50%,#e8b27a 50% 100%)}
.tv-range--freezer{background:linear-gradient(90deg,#8ec3ea 0 64.3%,#a9c58f 64.3% 100%)}
.tv-range--temp{background:linear-gradient(90deg,var(--tv-track) 0 36%,#a9c58f 36% 44%,var(--tv-track) 44% 100%)}
.tv-range--hum{background:linear-gradient(90deg,var(--tv-track) 0 89%,#a9c58f 89% 96.5%,var(--tv-track) 96.5% 100%)}
.tv-legend{display:grid;font-size:12px;line-height:18px;color:#456}
.tv-legend--ripening{grid-template-columns:15fr 35fr 50fr}
.tv-legend--freezer{display:block;position:relative;height:18px}
.tv-legend--freezer span{position:absolute;top:0}
.tv-legend--freezer span:nth-child(1){left:0}
.tv-legend--freezer span:nth-child(2){left:64.3%;transform:translateX(-50%)}
.tv-legend--freezer span:nth-child(3){right:0}

/* Wahl-Chips und Schalter */
.tv-chips{display:flex!important;flex-wrap:wrap;gap:8px!important}
.tv-chips legend{margin-bottom:6px}
.tv-chip{position:relative}
.tv-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tv-chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid var(--anicap-blue);border-radius:50px;background:#fff;color:var(--anicap-blue);font-weight:500;transition:background .18s,color .18s}
.tv-chip input:checked+span{background:var(--anicap-blue);color:#fff}
.tv-chip input:focus-visible+span{outline:3px solid var(--anicap-red);outline-offset:3px}
.tv-toggle{min-height:48px;padding:10px 28px;border:1px solid var(--anicap-blue);border-radius:50px;background:#fff;color:var(--anicap-blue);font-weight:500;justify-self:start;transition:background .18s,color .18s}
.tv-toggle[aria-pressed=true]{background:var(--anicap-blue);color:#fff}

/* Balken */
.tv-meters{display:grid;gap:12px}
.tv-meter{display:grid;gap:4px;font-size:14px;font-weight:500}
.tv-meter i{display:block;height:10px;border-radius:5px;background:#fff;overflow:hidden}
.tv-meter b{display:block;height:100%;width:var(--w,100%);border-radius:5px;background:var(--c,var(--anicap-green));transition:width .3s ease,background .3s}

/* Reifegrad */
.tv-spots circle{fill:#8c8f94;opacity:var(--tv-spots,0);transition:opacity .25s}

/* Austrocknen */
.tv-slices .tv-body{fill:var(--tv-slice,var(--tv-cream))}
.tv-cracks path{fill:none;stroke:#a88f4f;stroke-width:1.6;stroke-linecap:round;opacity:var(--tv-cracks,0);transition:opacity .25s}

/* Verpackung */
.tv-w{opacity:0;transition:opacity .25s}
.tv-w-plastic{fill:#cfe6f5;fill-opacity:.55;stroke:#7fb2d6;stroke-width:2}
.tv-w-paper{fill:#e9dcc0;fill-opacity:.85;stroke:#c9b88f;stroke-width:1.5}
path.tv-fold{fill:none;stroke:#c9b88f;stroke-width:1.2;stroke-dasharray:4 5}
.tv-w-foil{fill:#c4cad0;stroke:#8d969e;stroke-width:1.5}
.tv-w-holes circle{fill:#4d5860}
.tv-w-sweat path{fill:#8ec3ea}
[data-wrap=plastic] .tv-w-plastic,[data-wrap=plastic] .tv-w-sweat,[data-wrap=paper] .tv-w-paper,[data-wrap=foil] .tv-w-foil,[data-wrap=foil-holes] .tv-w-foil,[data-wrap=foil-holes] .tv-w-holes{opacity:1}
.tv-sun circle{fill:#f4c542}
.tv-sun path{stroke:#f4c542;stroke-width:3;stroke-linecap:round}
.tv-sun{opacity:.35;transition:opacity .25s}
[data-wrap=open] .tv-sun{opacity:1}

/* Gefrierfach */
.tv-ice path{fill:none;stroke:#5aa9dd;stroke-width:2.4;stroke-linecap:round;opacity:var(--tv-ice,0);transition:opacity .25s}
.tv-thermo-track{fill:#fff;stroke:var(--tv-track);stroke-width:1.5}
.tv-thermo-fill{fill:var(--tv-thermo,#a9c58f);transform-origin:bottom;transform-box:fill-box;transform:scaleY(var(--tv-level,.7));transition:transform .2s,fill .25s}
.tv-thermo-bulb{fill:var(--tv-thermo,#a9c58f);transition:fill .25s}

/* Klima */
.tv-climate{display:grid;gap:24px;align-items:center}
.tv-ring{position:relative;width:128px;height:128px;margin:0 auto;display:grid;place-content:center;text-align:center;line-height:1.2}
.tv-ring svg{position:absolute;inset:0;width:100%;height:100%}
.tv-ring-bg{fill:none;stroke:#fff;stroke-width:12}
.tv-ring-fg{fill:none;stroke:var(--tv-ring,var(--anicap-red));stroke-width:12;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:var(--tv-offset,314.16);transition:stroke-dashoffset .25s,stroke .25s}
.tv-score{position:relative;font-size:26px;font-weight:600;color:var(--anicap-blue)}
.tv-ring span{position:relative;font-size:12px;color:#456}

/* Käseglocke */
.tv-plate{fill:#dfe6eb}.tv-plate-top{fill:#fff}
.tv-bell{fill:#fff;fill-opacity:.35;stroke:#8fb4cd;stroke-width:2.5}
.tv-knob{fill:#fff;stroke:#8fb4cd;stroke-width:2.5}
.tv-tomato{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
.tv-tomato circle{fill:var(--anicap-red)}
.tv-tomato path{fill:none;stroke:#587a42;stroke-width:2.6;stroke-linecap:round}
.tv-mist circle{fill:#8ec3ea;opacity:0;transition:opacity .4s}
[data-tomato=true] .tv-tomato{opacity:1;transform:none}
[data-tomato=true] .tv-mist circle{opacity:.7}

/* Nachbarn */
.tv-strong-body{fill:#efece4;stroke:var(--tv-line);stroke-width:1.5}
.tv-veins{fill:none;stroke:#5f86a8;stroke-width:3;stroke-linecap:round;opacity:.8}
.tv-wall{fill:none;stroke:#8fa3b3;stroke-width:3;stroke-dasharray:6 6;transition:opacity .25s}
.tv-waves path{fill:none;stroke:#7d9a5c;stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .3s}
[data-near=together] .tv-wall{opacity:0}
[data-near=together] .tv-waves path{opacity:.9;animation:tv-drift 1.8s ease-in-out infinite alternate}
[data-near=together] .tv-waves path:nth-child(2){animation-delay:.25s}
[data-near=together] .tv-waves path:nth-child(3){animation-delay:.5s}
.tv-goat .tv-body{fill:var(--tv-goat,var(--tv-cream))}
@keyframes tv-drift{to{transform:translateX(-10px)}}

/* Eintritt beim Scrollen: nur wenn JavaScript läuft und Bewegung erlaubt ist */
@media (prefers-reduced-motion:no-preference){
 .anicap-tips.is-enhanced .anicap-tip{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
 .anicap-tips.is-enhanced .anicap-tip.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
 .anicap-tipviz *{transition:none!important;animation:none!important}
}
@media print{.anicap-tipviz,.anicap-tips__rail{display:none}.anicap-tips .anicap-tip{opacity:1!important;transform:none!important}}

@media(min-width:768px){
 .anicap-tip{grid-template-columns:72px minmax(0,1fr);gap:24px}
 .anicap-tip__number{font-size:40px;line-height:40px}
 .tv-climate{grid-template-columns:128px 1fr;gap:40px}
 .anicap-tipviz{padding:32px}
}
@media(min-width:1024px){
 .anicap-tips__layout{grid-template-columns:200px minmax(0,1fr);gap:64px;align-items:start}
 .anicap-tips__rail{position:sticky;top:32px}
 .anicap-tips__rail ol{flex-direction:column;gap:12px;position:relative}
 .anicap-tips__rail ol::before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--tv-track)}
 .anicap-tips__rail ol::after{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--anicap-blue);transform-origin:top;transform:scaleY(var(--tips-progress,0));transition:transform .15s linear}
 .anicap-tips__rail li{position:relative;z-index:1}
 .anicap-tips__rail a{display:flex;border:0;border-radius:0;padding:0;min-height:44px;background:none;color:inherit}
 .anicap-tips__rail a.is-active{background:none;color:var(--anicap-blue)}
 .anicap-tips__rail a.is-active .anicap-tips__rail-dot{background:var(--anicap-blue);color:#fff}
 .anicap-tips__rail-dot{width:44px;height:44px;border:2px solid var(--tv-track);background:#fff;font-size:16px}
 .anicap-tips__rail a.is-active .anicap-tips__rail-dot,.anicap-tips__rail a.is-passed .anicap-tips__rail-dot{border-color:var(--anicap-blue)}
 .anicap-tips__rail a.is-passed .anicap-tips__rail-dot{color:var(--anicap-blue)}
 .anicap-tips__station + .anicap-tips__station{margin-top:96px}
 .anicap-tips__station-title{scroll-margin-top:32px}
}