/* Container-Zentrierung & Größe */
.kaffee-animation-container.white-style {
width: 100%;
max-width: 180px;
margin: 0 auto 15px auto;
text-align: center;
/* Optional: Falls du den Container hier testen willst, nimm die Raute weg: */
/* background-color: #6F4E37; padding: 10px; border-radius: 8px; */
}

.kaffee-svg {
width: 100%;
height: auto;
overflow: visible;
}

/* CSS-Animation für den aufsteigenden weißen Dampf */
@keyframes dampfAufstiegWhite {
0% {
stroke-dashoffset: 100;
opacity: 0;
transform: translateY(4px) scaleX(0.9);
}
15% {
opacity: 0.8; /* Etwas sichtbarer auf Braun */
}
50% {
transform: translateX(2px) scaleX(1.1);
}
85% {
opacity: 0.5;
}
100% {
stroke-dashoffset: 0;
opacity: 0;
transform: translateY(-18px) scaleX(0.7); /* Etwas höherer Aufstieg */
}
}

.dampf {
stroke-dasharray: 60;
animation: dampfAufstiegWhite 3.5s infinite linear;
transform-origin: center bottom;
}

/* Zeitversetzung für die einzelnen Dampf-Fäden */
.d-1 { animation-delay: 0s; }
.d-2 { animation-delay: 1.2s; }
.d-3 { animation-delay: 2.3s; }