/* ═══════════════════════════════════════════════════
   Hauswerk360° – Ring Widget Styles
   Datei: assets/css/hw-ring.css
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

.hw-outer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
}

.hw-outer *,
.hw-outer *::before,
.hw-outer *::after {
    box-sizing: border-box;
}

.hw-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    font-family: 'Jost', sans-serif;
}

/* aspect-ratio allein reicht in manchen Contexts nicht –
   Höhe wird über padding-bottom erzwungen (klassischer Trick) */
.hw-wrap::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.hw-ring-layer,
.hw-house-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hw-house-layer {
    pointer-events: none;
}