* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Minimal Accessibility Styles - Keine Layout-Änderungen */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

*:focus {
    outline: 2px solid transparent;
}

.location-header:focus,
.location-header *:focus {
    outline: none !important;
}

/* Definition List - Keine Layout-Änderung */
dl.current-details {
    /* Zurück zum Standard - kein display: grid */
}

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(ellipse 1400px 800px at 12% 8%, rgba(80, 150, 255, 0.5), transparent 40%),
        radial-gradient(ellipse 1200px 600px at 25% 18%, rgba(50, 120, 245, 0.28), transparent 42%),
        radial-gradient(ellipse 1000px 700px at 40% 30%, rgba(35, 100, 235, 0.16), transparent 45%),
        radial-gradient(circle 900px at 35% 40%, rgba(30, 90, 230, 0.10), transparent 42%),
        radial-gradient(ellipse 1100px 800px at 60% 48%, rgba(20, 75, 215, 0.08), transparent 48%),
        radial-gradient(ellipse 1800px 1200px at 90% 85%, rgba(0, 5, 50, 0.5), transparent 45%),
        radial-gradient(circle 1400px at 100% 100%, rgba(0, 0, 40, 0.7), transparent 50%),
        radial-gradient(160% 160% at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 30, 0.75) 100%),
        linear-gradient(135deg, #1d5cc8 0%, #0a3d9a 25%, #052d7f 45%, #021855 70%, #010a30 100%);
    background-attachment: fixed;
    color: white;
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
}

.last-update {
    opacity: 0.5;
    font-size: 11px;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Main Grid */
.main-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom:10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Card Style */
.card {
    background: transparent;
    padding: 0;
    border: none;
    overflow: hidden;
}

.card-hourly {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    z-index: 30;
}

.location-info {
    flex: 1;
}

.location-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px 0 15px;
}

.chart-footer-daily {
    padding-left: 0;
}

.chart-legend {
    display: flex;
    gap: 20px;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-item span {
    opacity: 0.7;
}

.legend-line {
    width: 40px;
    height: 2.4px;
    opacity: 1;
}

.legend-line-temp {
    background-color: #FFD700;
}

.legend-line-temp-max {
    background-color: #FFD700;
}

.legend-line-temp-min {
    background-color: #FFA500;
}

.legend-line-precip {
    background-color: #4A9EFF;
}

.copyright {
    font-size: 11px;
    opacity: 0.5;
    white-space: nowrap;
}

.location-name {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.server-time {
    font-size: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    color: #FFD700;
}

.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.header-logo {
    width: 45px;
    height: 45px;
    opacity: 0.8;
}

.stand-time {
    font-size: 12px;
    opacity: 1;
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    position: absolute;
    top: 158px;
    right: 0;
    z-index: 1000;
    pointer-events: none;
}

.stand-time * {
    pointer-events: auto;
}

.stand-time-text {
    opacity: 0.7;
}

/* Connection Status Icon - alle IDs */
[id^="connection-status"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    opacity: 1 !important;
    flex-shrink: 0;
}

[id^="connection-status"] svg {
    width: 15px;
    height: 15px;
    display: block;
    margin-top: -1px;
}

[id^="connection-status"].status-connected svg path {
    fill: #00cc00; /* Connected Green */
}

[id^="connection-status"].status-disconnected svg path {
    fill: #cc0000; /* Disconnected Red */
}

[id^="connection-status"].status-connecting svg path {
    fill: #FFD700; /* Connecting Gold */
}

[id^="connection-status"].status-polling svg path {
    fill: #3b82f6; /* Polling Blue */
}

@keyframes blink-update {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

[id^="connection-status"].update-blink {
    animation: blink-update 0.5s ease-in-out 6; /* 6 blinks = 3 seconds */
}

.card-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Aktuell */
.current-main {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    margin-top: -14px;
}

.weather-symbol-large {
    width: 180px;
    height: 180px;
    min-height: 180px;
    flex-shrink: 0;
    position: relative;
}

.weather-symbol-large img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.weather-symbol-large img[src*="starkwind"] {
    mix-blend-mode: screen;
}

/* Moon Phase Shadow - Disabled */
.moon-shadow-inline {
    display: none;
}

.current-temp {
    margin-top: 10px;
    width: 100%;
}


.temp-value {
    font-size: 64px;
    font-weight: 700;
    line-height: 0.9;
    margin: 10px 0 0 -3px;
}

.feels-like {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 10px;
}

.temp-description-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.temp-description {
    font-size: 18px;
    opacity: 0.9;
}

.moon-phase {
    flex-shrink: 0;
    align-self: flex-end;
}

.current-details {
    display: grid;
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column; /* Spaltenweise füllen statt zeilenweise */
    gap: 6px 20px;
    padding-top: 10px;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 0px;
}

/* Desktop: Gleiche Reihenfolge wie Mobile (spaltenweise) */
.detail-item:nth-child(1) { order: 1; }  /* Höchsttemperatur */
.detail-item:nth-child(2) { order: 2; }  /* Tiefsttemperatur */
.detail-item:nth-child(3) { order: 3; }  /* Wind */
.detail-item:nth-child(5) { order: 4; }  /* Böen */
.detail-item:nth-child(7) { order: 5; }  /* Luftdruck */
.detail-item:nth-child(4) { order: 6; }  /* Niederschlag */
.detail-item:nth-child(6) { order: 7; }  /* Regen */
.detail-item:nth-child(8) { order: 8; }  /* Luftfeuchtigkeit */
.detail-item:nth-child(9) { order: 9; }  /* Sonnenaufgang */
.detail-item:nth-child(10) { order: 10; } /* Sonnenuntergang */

.detail-item {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 0;
}

.detail-label {
    opacity: 0.7;
}

.detail-value {
    font-weight: 500;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wind-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Stunden-Carousel */
.hourly-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -1px;
    margin-bottom: 0;
}

.hourly-carousel::-webkit-scrollbar {
    display: none;
}

/* Chart visibility: Desktop shows desktop charts, mobile shows mobile charts */
.chart-mobile {
    display: none;
}

.chart-desktop {
    display: block;
}

/* Hourly Chart Container */
.hourly-chart-container {
    position: relative;
    margin-top: 27px;
    min-height: 153px;
}

/* Hourly Chart Wrapper */
.hourly-chart-wrapper {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 40px;
    margin-right: 30px;
    width: calc(100% - 70px);
}

.hourly-chart-wrapper::-webkit-scrollbar {
    display: none;
}

.hourly-chart {
    display: block;
    background: transparent;
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.hourly-chart.loaded {
    opacity: 1;
}

/* Sticky Y-Achsen */
.y-axis-sticky {
    position: absolute;
    top: 0;
    height: 152px;
    width: 45px;
    background: transparent;
    z-index: 10;
    padding: 5px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    pointer-events: none;
}

.y-axis-sticky-left {
    left: 0;
    text-align: left;
}

.y-axis-sticky-right {
    right: 0;
    text-align: right;
}

/* Daily Chart Container */
.daily-chart-container {
    position: relative;
    margin-top: 15px;
}

.daily-chart-container .y-axis-sticky {
    height: 100px;
}

/* Daily Chart Wrapper */
.daily-chart-wrapper {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 30px;
    margin-right: 30px;
    width: calc(100% - 65px);
    height: 100px;
}

.daily-chart-wrapper::-webkit-scrollbar {
    display: none;
}

.daily-chart {
    display: block;
    background: transparent;
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.daily-chart.loaded {
    opacity: 1;
}

.y-axis text {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
}

.hourly-item {
    flex: 0 0 120px;
    scroll-snap-align: start;
    text-align: center;
    padding: 5px 10px 0 10px;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    transition: opacity 0.2s;
}

.hourly-item:first-child {
    border-left: none;
}

/* Tag/Nacht Indikator - versteckt auf Desktop */
.hourly-daynight-indicator {
    display: none;
}

/* Tag/Nacht Punkt - Desktop/Tablet */
.hourly-daynight-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 3px;
}

/* Tag-Farbe (gelb) */
.hourly-item[data-daynight="day"] .hourly-daynight-dot {
    background-color: #FFD700;
}

/* Nacht-Farbe (blau) */
.hourly-item[data-daynight="night"] .hourly-daynight-dot {
    background-color: #4A9EFF;
}

.hourly-time {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.weather-symbol-small {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    position: relative;
}

.weather-symbol-small img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.weather-symbol-small img[src*="starkwind"] {
    mix-blend-mode: screen;
}

.hourly-temp {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top:-4px;
}

.hourly-precip {
    font-size: 12px;
    color: rgba(135, 206, 250, 0.9);
}

.hourly-wind {
    font-size: 16px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 7px;
}

.wind-icon-small {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* 16-Tage Carousel */
.daily-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.daily-carousel::-webkit-scrollbar {
    display: none;
}

.daily-item {
    flex: 0 0 97px;
    scroll-snap-align: start;
    text-align: center;
    padding: 0 5px;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.daily-item:hover {
    background: #ffd60040 !important;
    transition: background-color 0.2s ease-in;
}

.daily-item:active {
    transform: translateY(0);
}

.daily-item-active {
    border-left: 2px solid #FFD700;
    border-right: 2px solid #FFD700;
}


.daily-date {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.daily-day {
    font-size: 12px;
    opacity: 0.7;
    position: relative;
    text-align: center;
}

.daily-link-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.daily-item:hover .daily-link-icon {
    opacity: 1;
}

.weather-symbol-medium {
    width: 75px;
    height: 75px;
    min-height: 75px;
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;  /* Verhindert Layout-Shift */
}

/* Hourly symbols größer (90px) mit kleinem margin */
.hourly-item .weather-symbol-medium {
    width: 90px;
    height: 90px;
    min-height: 90px;
    margin: -13px auto 0;
}

/* Daily symbols mit größerem margin nach oben */
.daily-item .weather-symbol-medium {
    min-height: 75px;
    margin: -12px auto 0;
}

.weather-symbol-medium img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.weather-symbol-medium img[src*="starkwind"] {
    mix-blend-mode: screen;
}

/* Weather Scene Layer Stacking (new rendering system) */
.weather-symbol-large img.astronomy-layer,
.weather-symbol-medium img.astronomy-layer,
.weather-symbol-small img.astronomy-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.weather-symbol-large img.weather-layer,
.weather-symbol-medium img.weather-layer,
.weather-symbol-small img.weather-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

.daily-temps {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: -4px;
    margin-bottom: 5px;
    font-size: 16px;
}

.temp-max {
    font-weight: 600;
}

.temp-min {
    opacity: 0.6;
}

.daily-precip {
    font-size: 11px;
    margin: 4px 0;
    color: rgba(135, 206, 250, 0.9);
    letter-spacing: -0.5px;
    font-stretch: condensed;
}

.daily-precip .precip-icon {
    margin-right: -2px;
}

.daily-link {
    display: none;
}

.daily-link svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.daily-description {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.3;
}

/* Carousel Scroll Buttons */
.carousel-wrapper {
    position: relative;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s, background 0.3s;
    opacity: 0;
    pointer-events: none;
}

.scroll-btn.active {
    opacity: 1;
    pointer-events: all;
}

.scroll-btn:hover {
    background: rgba(0, 0, 0, 0.3);
}

.scroll-btn-left {
    left: 10px;
}

.scroll-btn-right {
    right: 10px;
}

.scroll-btn svg {
    width: 30px;
    height: 30px;
    fill: white;
}

/* 24-Stunden Prognose Scroll Buttons */
.card-hourly .scroll-btn {
    top: 61%;
    transform: translateY(-40%);
}

/* 14-Tage Prognose Scroll Buttons */
.card:not(.card-hourly) .scroll-btn {
    top: 64%;
    transform: translateY(-36%);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet Layout: current-details rechts von current-main */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Erste card als Grid mit benannten Bereichen */
    .main-grid > .card:first-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "date-nav date-nav"
            "current-main current-details";
        gap: 0 30px;
    }

    .location-header {
        grid-area: header;
    }

    .date-navigation {
        grid-area: date-nav;
    }

    .current-main {
        grid-area: current-main;
        gap: 10px;
    }

    .current-details {
        grid-area: current-details;
        margin-top: 0;
        border-top: none;
        padding: 24px 0 21px 0;
        gap: 0px 20px;
    }

    .detail-item {
        font-size: 13px;
    }

    .card-hourly {
        border: 0;
    }

    .hourly-chart-container .y-axis-sticky-left {
        left: -16px;
    }

    .hourly-chart-wrapper {
        margin-left: 30px;
    }

    .hourly-carousel {
        margin: 0;
    }

    .hourly-item:first-child {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hourly-item:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .temp-description-row {
        justify-content: unset;
    }
}

@media (max-width: 768px) {
    /* Hide desktop charts, show mobile charts */
    .chart-desktop {
        display: none !important;
    }

    .chart-mobile {
        display: block !important;
    }

    /* Mobile Chart Containers */
    .hourly-chart-container-mobile {
        position: relative;
        margin-top: 15px;
        min-height: 140px;
    }

    .hourly-chart-container-mobile .y-axis-sticky {
        position: absolute;
        top: 0;
        height: 115px;
        width: 30px;
        z-index: 10;
        font-family: 'Nunito', sans-serif;
        font-size: 10px;
        pointer-events: none;
    }

    .hourly-chart-container-mobile .y-axis-sticky-left {
        left: 0;
        text-align: left;
    }

    .hourly-chart-container-mobile .y-axis-sticky-right {
        right: 0;
        text-align: right;
    }

    .hourly-chart-wrapper-mobile {
        position: relative;
        width: 100%;
        height: 140px;
    }

    .hourly-chart-mobile {
        display: block;
        background: transparent;
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }

    .hourly-chart-mobile.loaded {
        opacity: 1;
    }

    .daily-chart-container-mobile {
        position: relative;
        margin-top: 15px;
        min-height: 120px;
    }

    .daily-chart-container-mobile .y-axis-sticky {
        position: absolute;
        top: 0;
        height: 95px;
        width: 30px;
        z-index: 10;
        font-family: 'Nunito', sans-serif;
        font-size: 10px;
        pointer-events: none;
    }

    .daily-chart-container-mobile .y-axis-sticky-left {
        left: 0;
        text-align: left;
    }

    .daily-chart-container-mobile .y-axis-sticky-right {
        right: 0;
        text-align: right;
    }

    .daily-chart-wrapper-mobile {
        position: relative;
        width: 100%;
        height: 120px;
    }

    .daily-chart-mobile {
        display: block;
        background: transparent;
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }

    .daily-chart-mobile.loaded {
        opacity: 1;
    }

    .current-main {
        flex-direction: row;
        text-align: left;
        gap: 40px;
        margin: 0 auto;
        width: fit-content;
    }

    .temp-value {
        font-size: 56px;
    }

    .feels-like {
        font-size: 14px;
    }

    .current-temp {
        margin: 0;
    }

    .temp-description {
        font-size: 16px;
    }

    .temp-description-row {
        justify-content: unset;
    }

    .current-details {
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    /* Mobile Reihenfolge: Höchst, Tiefst, Wind, Böen, Luftdruck, Niederschlag, Regen, Feuchtigkeit, Sonne */
    .current-details .detail-item:nth-child(1) { order: 1; }  /* Höchsttemperatur */
    .current-details .detail-item:nth-child(2) { order: 2; }  /* Tiefsttemperatur */
    .current-details .detail-item:nth-child(3) { order: 3; }  /* Wind */
    .current-details .detail-item:nth-child(5) { order: 4; }  /* Böen */
    .current-details .detail-item:nth-child(7) { order: 5; }  /* Luftdruck */
    .current-details .detail-item:nth-child(4) { order: 6; }  /* Niederschlag */
    .current-details .detail-item:nth-child(6) { order: 7; }  /* Regen */
    .current-details .detail-item:nth-child(8) { order: 8; }  /* Luftfeuchtigkeit */
    .current-details .detail-item:nth-child(9) { order: 9; }  /* Sonnenaufgang */
    .current-details .detail-item:nth-child(10) { order: 10; } /* Sonnenuntergang */

    .card-hourly {
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .card-hourly .carousel-wrapper {
        order: 3;
    }

    .card-hourly .hourly-chart-container,
    .card-hourly .hourly-chart-container-mobile {
        order: 1;
    }

    .card-hourly .chart-footer {
        order: 2;
    }

    /* Mobile: Card overflow visible, damit stand-time nicht abgeschnitten wird */
    .card {
        overflow: visible;
        position: relative;
    }

    /* Mobile: stand-time positionieren */
    .stand-time {
        position: absolute;
        top: -20px;
        right: 0;
        z-index: 10;
    }

    /* Mobile: Chart-Footer padding */
    .chart-footer {
        padding-left: 1px;
    }

    /* Mobile: Chart Container Margin */
    .hourly-chart-container-mobile {
        margin-top: 10px;
    }

    /* Mobile: Current Details Border */
    .current-details {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* 14-Tage Prognose: Same pattern as card-hourly */
    .card-daily {
        display: flex;
        flex-direction: column;
    }

    .card-daily .card-header {
        order: 1;
    }

    .card-daily .daily-chart-container,
    .card-daily .daily-chart-container-mobile {
        order: 2;
    }

    .card-daily .chart-footer {
        order: 3;
    }

    .card-daily .carousel-wrapper {
        order: 4;
        margin-top: 15px;
    }

    .hourly-carousel {
        margin-top: 15px;
    }

    .hourly-carousel {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 0;
        border: 0;
        margin: 20px 0 0 0;
    }

    .hourly-item {
        display: grid;
        grid-template-columns: 3px 0.8fr 70px 0.6fr 1.8fr 80px;
        align-items: center;
        text-align: left;
        padding: 0;
        gap: 8px;
        margin: 0;
        flex: none;
        border: 0;
        background: transparent;
    }

    .hourly-item:nth-child(odd) {
        background: rgba(255, 255, 255, 0.08);
    }

    .hourly-item:hover {
        background: #ffd60040 !important;
    }

    /* Tag/Nacht Indikator - nur Mobile */
    .hourly-daynight-indicator {
        display: block;
        height: 100%;
        grid-column: 1;
        grid-row: 1 / -1;
    }

    /* Tag-Farbe (gelb) */
    .hourly-item[data-daynight="day"] .hourly-daynight-indicator {
        background-color: #FFD700;
    }

    /* Nacht-Farbe (blau) */
    .hourly-item[data-daynight="night"] .hourly-daynight-indicator {
        background-color: #4A9EFF;
    }

    /* Punkt verstecken auf Mobile (Spalte wird verwendet) */
    .hourly-daynight-dot {
        display: none;
    }

    .hourly-time {
        margin: 0;
        font-weight: 500;
        font-size: 16px;
        padding-left: 10px;
    }

    .weather-symbol-small {
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .hourly-item .weather-symbol-medium {
        width: 60px;
        height: 60px;
        min-height: 60px;
    }

    .hourly-temp {
        font-size: 16px;
        margin: 0;
        text-align: center;
    }

    .hourly-precip {
        font-size: 16px;
        text-align: center;
    }

    .hourly-wind {
        text-align: right;
        white-space: nowrap;
        font-size: 16px;
    }

    .wind-icon-small {
        width: 14px;
        height: 14px;
    }

    .daily-carousel {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 0;
        border: 0;
    }

    .daily-item {
        display: grid;
        grid-template-columns: 0.8fr 60px 1.1fr 1.8fr 30px;
        grid-template-rows: auto auto;
        align-items: center;
        text-align: left;
        padding: 0;
        gap: 2px 8px;
        margin: 0;
        flex: none;
        border: 0;
        background: transparent;
    }

    .daily-item:nth-child(odd) {
        background: rgba(255, 255, 255, 0.08);
    }

    .daily-item:hover {
        background: #ffd60040 !important;
        transition: background-color 0.2s ease-in;
    }

    .daily-day {
        grid-column: 1;
        grid-row: 1;
        padding-left: 10px;
        padding-top: 10px;
        font-size: 16px;
        margin: 0;
        font-weight: 500;
        line-height: 0.8;
    }

    .daily-date {
        grid-column: 1;
        grid-row: 2;
        padding-left: 10px;
        padding-bottom: 10px;
        font-size: 16px;
        margin: 0;
        line-height: 0.8;
    }

    .daily-item .weather-symbol-medium {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 60px;
        height: 60px;
        min-height: 60px;
        margin: 0;
    }

    .daily-temps {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: row;
        gap: 3px;
        margin: 0;
        text-align: center;
        font-size: 16px;
    }

    .daily-precip {
        grid-column: 4;
        grid-row: 1 / 3;
        text-align: center;
        font-size: 16px;
    }

    .daily-link {
        grid-column: 5;
        grid-row: 1 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        padding-right: 10px;
        padding-top: 0;
        height: 100%;
    }

    .daily-description {
        display: none;
    }

    .weather-symbol-medium {
        width: 60px;
        height: 60px;
        min-height: 60px;
        margin: 0 auto;
    }

    .hourly-item .weather-symbol-medium {
        min-height: 60px;
        margin: 0;
    }
}

/* Medium-Small Mobile Devices (< 560px) */
@media (max-width: 560px) {
    .hourly-time {
        font-size: 14px;
    }

    .hourly-temp {
        font-size: 14px;
    }

    .hourly-precip {
        font-size: 14px;
    }

    .hourly-wind {
        font-size: 14px;
    }

    .daily-day {
        font-size: 14px;
    }

    .daily-date {
        font-size: 14px;
    }

    .daily-temps {
        font-size: 14px;
    }

    .daily-precip {
        font-size: 14px;
    }
}

/* Small Mobile Devices (< 420px) */
@media (max-width: 400px) {
    .weather-symbol-large {
        width: 170px;
        height: 170px;
        min-height: 170px;
    }

    .current-main {
        gap: 20px;
    }

    .temp-description {
        font-size: 13px;
    }

    .feels-like {
        font-size: 13px;
    }

    .temp-value {
        font-size: 40px;
    }
}

/* ============================================
   AUTO-UPDATE INDICATOR
   ============================================ */

/* Green blinking dot indicator */
.update-indicator {
    display: inline-block;
    font-size: 18px;
    margin-right: 6px;
    animation: colorBlink 0.5s ease-in-out 5;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

@keyframes colorBlink {
    0%, 100% {
        color: #00ff00;
    }
    50% {
        color: rgba(0, 255, 0, 0.3);
    }
}

/* ============================================
   AUTO-UPDATE NOTIFICATION & LOADING STATES (UNUSED - kept for reference)
   ============================================ */

/* Update notification */
.update-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
}

.notification-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Nunito', sans-serif;
}

.notification-icon {
    font-size: 24px;
    line-height: 1;
}

.notification-text {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.btn-refresh {
    background: #4A9EFF;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Nunito', sans-serif;
}

.btn-refresh:hover {
    background: #3d8ae6;
}

.btn-refresh:active {
    transform: scale(0.98);
}

/* Slide in animation */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading state overlay */
.container.updating {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.container.updating::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 999;
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Optional: Value change highlight effect */
.value-changed {
    animation: highlight 2s ease-out;
}

@keyframes highlight {
    0%, 100% {
        background: transparent;
    }
    50% {
        background: rgba(255, 215, 0, 0.2);
    }
}

/* Responsive adjustments for notification */
@media (max-width: 600px) {
    .update-notification {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .notification-content {
        padding: 12px 15px;
        gap: 10px;
    }

    .notification-icon {
        font-size: 20px;
    }

    .notification-text {
        font-size: 14px;
    }

    .btn-refresh {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Desktop: Show all 14 days without carousel */
@media (min-width: 1400px) {
    .daily-carousel {
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .daily-item {
        flex: 0 0 calc(calc(100% - 2px) / 14);
        scroll-snap-align: none;
    }

    .weather-symbol-medium {
        width: 75px;
        height: 75px;
        min-height: 75px;
        max-width: 75px;
        max-height: 75px;
    }

    .hourly-item .weather-symbol-medium {
        width: 90px;
        height: 90px;
        min-height: 90px;
        max-width: 90px;
        max-height: 90px;
    }

    .daily-item:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .daily-item:last-child.daily-item-active {
        border-right: 2px solid #FFD700;
    }

}

/* ============================================
   DATE NAVIGATION
   ============================================ */
.date-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 100;
}

.date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 400;
    color: #FFD700;
    font-variant-numeric: tabular-nums;
}

.date-display svg {
    opacity: 0.8;
    stroke: white;
}

.date-nav-icons {
    display: flex;
    gap: 0;
    align-items: center;
}

.date-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.date-nav-btn:hover {
    opacity: 1;
}

.date-nav-btn svg {
    fill: #FFD700;
}

.date-nav-btn:first-child svg {
    width: 24px;
    height: 24px;
    margin-right: -5px;
}

.date-nav-btn:last-child svg {
    stroke: #FFD700;
    stroke-width: 1.2;
}

.btn-today {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 0;
    padding: 2px 10px;
    color: #FFD700;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    user-select: none;
    white-space: nowrap;
    line-height: 1.2;
}

.btn-today * {
    pointer-events: none;
}

.btn-today:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-today:active {
    background: rgba(255, 255, 255, 0.3);
}

/* Chart Loader */
.chart-loader {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-top:4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: chart-loader-fadein 0.3s ease-out 0.5s forwards;
    z-index: 10;
}

.chart-loader svg {
    display: block;
    animation: chart-loader-pulse 2s ease-in-out 0.5s infinite;
}

@keyframes chart-loader-fadein {
    to {
        opacity: 1;
    }
}

@keyframes chart-loader-pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Fade out loader when chart is ready */
.chart-loader.hidden {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    position: relative;
    z-index: 2000;
    top: -20px;
}

.footer-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    text-align: right;
}

.footer-link {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.footer-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

.footer-separator {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   MODAL
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: none;
}

.modal.show {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    max-width: 600px;
    margin: 50px auto;
    background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal-close styles moved to modal_frame.tpl */

.modal h2 {
    margin: 0 0 20px 0;
    color: #FFD700;
    font-size: 24px;
    font-weight: 600;
}

.modal h3 {
    margin: 20px 0 10px 0;
    color: #FFD700;
    font-size: 18px;
    font-weight: 600;
}

.modal h3:first-child {
    margin-top: 0;
}

.modal-body {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.modal-body p {
    margin: 0 0 15px 0;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

/* Mobile Modal Anpassungen */
@media (max-width: 768px) {
    /* Hide desktop daily link icon on mobile */
    .daily-link-icon {
        display: none;
    }

    .site-footer {
        top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 5px;
    }

    .footer-wrapper {
        padding: 0 15px;
    }

    .modal-content {
        margin: 20px;
        padding: 20px;
        max-height: calc(100vh - 40px);
    }

    .modal h2 {
        font-size: 20px;
        margin-right: 30px;
    }

    .modal h3 {
        font-size: 16px;
    }

    .footer-link {
        font-size: 11px;
    }
}

/* ===========================
   Fullscreen Modal Container
   =========================== */

.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden; /* iframe handles its own scrolling */
    display: none; /* Hidden by default, shown via JavaScript */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fullscreen-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Moon Icon Clickable Trigger */
.moon-icon-trigger {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    line-height: 1;
    vertical-align: middle;
}

.moon-icon-trigger img {
    display: block;
    width: 24px;
    height: 24px;
    bottom: 4px;
    position: relative;
}

.moon-icon-trigger:hover {
    transform: scale(1.15);
    opacity: 0.85;
}

.moon-icon-trigger:active {
    transform: scale(1.05);
}

/* ============================================================
   PAGE STYLES - From page_frame.tpl (formerly inline)
   Styles for standalone pages (Mondkalender, Impressum, etc.)
   ============================================================ */

/* Page Body Base Styles */

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page-header {
    background: linear-gradient(120deg, rgb(159 209 255 / 22%) 0%, rgb(159 209 255 / 5%) 50%);
    border: none;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 50px;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(120deg, rgb(159 209 255 / 22%) 0%, rgb(159 209 255 / 5%) 50%);
    border-radius: 8px;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}

.page-header h1 {
    color: white;
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

/* Navigation Buttons */
.month-nav {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.month-nav.prev {
    border-radius: 8px 0 0 8px;
}

.month-nav.next {
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.month-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.month-nav::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}

.month-nav.prev::after {
    border-width: 8px 12px 8px 0;
    border-color: transparent white transparent transparent;
}

.month-nav.next::after {
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent white;
}

/* Button Group */
.header-button-group {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
}

/* Close Button */
.page-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 50px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

.page-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.page-close svg {
    width: 26px;
    height: 26px;
    fill: white;
}

.page-close svg path {
    stroke: white;
    stroke-width: 0.5;
}

.page-content-wrapper {
    padding: 0 23px;
}

/* Mondkalender: Kein Padding (benötigt volle Breite) */
.page-mondkalender .page-content-wrapper {
    padding: 0;
}

/* Page Content Formatting */
.page-content-wrapper h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    color: rgba(255, 255, 255, 0.95);
}

.page-content-wrapper h3:first-child {
    margin-top: 0;
}

.page-content-wrapper p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.85);
}

.page-content-wrapper a {
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-content-wrapper a:hover {
    color: #93c5fd;
    text-decoration: underline;
}

.page-content-wrapper strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* Moon Calendar Styles */
.moon-calendar-grid {
    display: grid;
    gap: 15px;
}

/* Desktop large: 8 per row */
@media (min-width: 1400px) {
    .moon-calendar-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Desktop: 6 per row */
@media (min-width: 1024px) and (max-width: 1399px) {
    .moon-calendar-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Tablet: 4 per row */
@media (min-width: 600px) and (max-width: 1023px) {
    .moon-calendar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile: 2 per row */
@media (max-width: 599px) {
    .moon-calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Moon Overview Card - 2x1 grid size */
.moon-overview-card {
    grid-column: span 2;
    grid-row: span 1;
    background: linear-gradient(135deg, rgb(159 209 255 / 28%) 0%, rgb(159 209 255 / 8%) 50%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.moon-rotation-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.moon-rotation-date {
    font-size: 16px;
    font-weight: 600;
    color: #FFD700;
}

.visibility-status-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.visibility-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.moon-rotation-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.moon-rotation-icon {
    width: 180px;
    height: 180px;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.moon-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.loader-icon {
    width: 120px;
    height: 120px;
    animation: pulse 2s ease-in-out infinite;
    object-fit: contain;
    transform: scale(1.3);
}

.loader-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.visibility-time {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.visibility-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.visibility-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.visibility-dot.visible {
    background-color: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

.visibility-dot.hidden {
    background-color: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

/* Moon Animation Controls */
.moon-animation-controls {
    position: absolute;
    bottom: 8px;
    right: 6px;
    display: flex;
    gap: 3px;
    z-index: 20;
}

.moon-control-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.moon-control-btn:hover:not(:disabled) {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.moon-control-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.moon-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.moon-control-btn svg {
    width: 24px;
    height: 24px;
}

/* Play button (when animation is playing) */
.moon-control-btn.moon-play-btn {
    color: #FFD700;
}

.moon-control-btn.moon-play-btn:hover {
    color: #FFD700;
}

/* Show/hide play and pause icons */
.moon-control-btn .play-icon {
    display: none;
}

.moon-control-btn .pause-icon {
    display: block;
}

/* Moon Day Card */
.moon-day-card {
    background: linear-gradient(120deg, rgb(159 209 255 / 22%) 0%, rgb(159 209 255 / 5%) 50%);
    border: none;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.moon-day-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(120deg, rgb(159 209 255 / 22%) 0%, rgb(159 209 255 / 5%) 50%);
    border-radius: 8px;
    mix-blend-mode: soft-light;
    pointer-events: none;
}


/* Day Header */
.day-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.day-date {
    font-size: 16px;
    font-weight: 600;
    color: #FFD700;
}

/* Header Icons Overlay (Zodiac + Moon) */
.header-icons-overlay {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0;
}

.zodiac-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
    transition: opacity 0.2s;
}

.zodiac-icon:hover {
    opacity: 1;
}

.zodiac-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.moon-horizon-img {
    width: 46px;
    height: 46px;
    display: block;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    margin: -3px -5px -3px -5px;
    object-fit: cover;
}

.moon-horizon-img:hover {
    opacity: 1;
}

/* Moon Icon */
.moon-icon-wrapper {
    margin: 15px 0;
}

.moon-icon {
    width: 90px;
    height: 90px;
    display: block;
    margin: 0 auto;
}

/* Moon Info */
.moon-info {
    font-size: 13px;
}

.altitude {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.altitude .label {
    color: rgba(255, 255, 255, 0.6);
}

.altitude .value {
    color: #FFD700;
}

.phase-name {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    font-weight: 500;
}

.illumination {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.moon-details {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    margin-top: 4px;
}

/* Mobile Moon Card adjustments */
@media (max-width: 599px) {
    .moon-day-card {
        padding: 10px;
    }

    .moon-icon {
        width: 50px;
        height: 50px;
    }

    .moon-info {
        font-size: 13px;
    }

    .moon-overview-card {
        padding: 10px;
    }

    .moon-rotation-date {
        font-size: 14px;
    }

    .moon-rotation-icon {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 20px 15px;
    }

    .page-content-wrapper {
        padding: 0 11px;
    }

    .page-header h1 {
        font-size: 18px;
        padding: 0 10px;
    }

    .month-nav {
        width: 40px;
    }

    .month-nav.prev::after {
        border-width: 6px 9px 6px 0;
    }

    .month-nav.next::after {
        border-width: 6px 0 6px 9px;
    }

    .page-close {
        width: 40px;
    }

    .page-close svg {
        width: 20px;
        height: 20px;
    }

    .header-button-group {
        min-height: 40px;
    }
}

/* ============================================================================
   ZODIAC SIGNS - SVG BACKGROUND ICONS (WHITE RGBA)
   ============================================================================ */

/* Base zodiac icon class */
.sternzeichen-widder, .sternzeichen-stier, .sternzeichen-zwillinge, .sternzeichen-krebs,
.sternzeichen-loewe, .sternzeichen-jungfrau, .sternzeichen-waage, .sternzeichen-skorpion,
.sternzeichen-schuetze, .sternzeichen-steinbock, .sternzeichen-wassermann, .sternzeichen-fische {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0.85;
}

/* Zwillinge horizontal skaliert */
.sternzeichen-zwillinge {
    transform: scaleX(1.4);
}

/* Widder (Ari) */
.sternzeichen-widder {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032.401%2032.4%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M22.411%2C20.864c0%2C0-2.285-0.529-2.529-1.303c-0.242-0.774%2C0.428-1.772%2C0.967-1.502c0.537%2C0.27%2C0.727%2C1.385%2C1.729%2C1.771%20s3.346-2.866%2C3.59-3.699c0.246-0.833%2C0.387-1.312%2C0.387-1.312s8.326-5.437%2C0-13.609c-0.663-0.516-6.352-3.391-10.569%2C2.109%20c-0.468%2C0.771-4.656%2C8.644%2C1.703%2C10.459c7.422%2C2.119%2C8.329-8.115%2C4.017-6.803c1.25%2C1.655%2C1.008%2C4.291-1.97%2C3.188%20c-2.022-1.271%2C0.222-4.078%2C0.222-4.078s1.287-2.174%2C3.748-1.047c1.426%2C0.654%2C5.135%2C6.043-1.418%2C9.629%20c-10.754%2C3.227-9.981-6.825-9.981-6.825s-1.366-1.967-2.6-1.042c1.041%2C0.926%2C2.006%2C2.198%2C0.578%2C2.159%20c-1.966-0.771-7.158%2C1.604-8.135%2C2.544C5.545%2C12.289%2C13.035%2C25.83%2C13.713%2C32.4c0.656-0.039%2C1.144-7.523-0.418-10.8%20c-0.777-1.077-3.976-3.234-0.969-6.858c0.616%2C0.077-2.843%2C2.608%2C2.969%2C5.608c-0.578%2C1.116-1.312%2C5.07%2C0.616%2C6.188%20C17.838%2C27.657%2C19.52%2C21.442%2C22.411%2C20.864%22/%3E%3C/svg%3E');
}

/* Stier (Tau) */
.sternzeichen-stier {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2031.598%2031.598%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M20.808%2C19.302c4.438-3.492%2C4.438-3.492%2C2.645-6.795c-1.794-3.303-8.494-4.435-1.135-9.815%20C16.75-0.801%2C11.049%2C2.853%2C11.71%2C3.891c0.755%2C2.927-3.617%2C7.283-3.617%2C7.283s0.577%2C5.334%2C0.446%2C5.893s-1.417%2C6.106-2.171%2C8.562%20C5.614%2C28.08%2C9.2%2C27.893%2C9.483%2C29.402c0.283%2C1.509%2C8.494%2C1.226%2C8.307-0.475c0.094-3.113%2C6.087-7.854%2C6.795-7.833%20s-1.847%2C4.119-1.847%2C4.119l8.547%2C0.033V14.583C31.284%2C14.583%2C25.338%2C22.038%2C20.808%2C19.302z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M20.27%2C7.84c1.606%2C0.806%2C4.064%2C3.922%2C5.182%2C5.985c1.114%2C2.063-1.083%2C3.583-2.713%2C5.024%20c3.36%2C1.159%2C9.449-5.927%2C8.813-9.113c-0.543-3.75-7.938-6.798-8.554-6.314C22.382%2C3.906%2C19.575%2C5.763%2C20.27%2C7.84z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M7.989%2C9.944c0%2C0%2C3.25-3.979%2C2.781-6.042C4.612-0.628-6.278%2C16.801%2C4.693%2C15.861C2.641%2C11.491%2C7.989%2C9.944%2C7.989%2C9.944z%22/%3E%3C/svg%3E');
}

/* Zwillinge (Gem) */
.sternzeichen-zwillinge {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032.001%2032.001%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M27.129%2C17.488c-0.414-1.125-0.506-2.625-0.65-3.376c-0.146-0.751%2C0.06-4.857-1.007-5.924%20c-1.065-1.066-3.109-1.362-3.331-1.686C22%2C6.298%2C22.105%2C5.758%2C22.201%2C5.384c0.937-0.459%2C1.584-1.422%2C1.584-2.546%20c0-1.567-1.25-2.838-2.791-2.838c-0.059%2C0-0.113%2C0.014-0.172%2C0.017c-0.058-0.002-0.112-0.016-0.17-0.016%20c-1.542%2C0-2.793%2C1.271-2.793%2C2.838c0%2C1.124%2C0.649%2C2.087%2C1.584%2C2.546c0.098%2C0.374%2C0.2%2C0.914%2C0.061%2C1.118%20c-0.222%2C0.323-2.266%2C0.619-3.332%2C1.686c-0.061%2C0.061-0.117%2C0.135-0.17%2C0.214c-0.053-0.079-0.109-0.153-0.17-0.214%20c-1.066-1.066-3.11-1.362-3.332-1.686c-0.139-0.204-0.037-0.744%2C0.06-1.118c0.934-0.459%2C1.584-1.422%2C1.584-2.546%20c0-1.567-1.251-2.838-2.792-2.838c-0.059%2C0-0.113%2C0.014-0.171%2C0.017c-0.057-0.003-0.113-0.017-0.171-0.017%20c-1.542%2C0-2.792%2C1.271-2.792%2C2.838c0%2C1.124%2C0.649%2C2.087%2C1.584%2C2.546c0.096%2C0.374%2C0.199%2C0.914%2C0.06%2C1.118%20C9.64%2C6.826%2C7.596%2C7.122%2C6.531%2C8.189c-1.066%2C1.066-0.862%2C5.173-1.007%2C5.924c-0.146%2C0.751-0.237%2C2.252-0.652%2C3.377%20c-0.414%2C1.125-0.06%2C2.133%2C0.415%2C2.664c0.474%2C0.533%2C1.126%2C0.298%2C1.481-0.413c0.355-0.712-0.8-1.179-0.533-1.955%20c0.266-0.779%2C1.745-8.204%2C2.013-7.716c0.094%2C0.17%2C0.502%2C2.494%2C0.489%2C5.376c-0.022%2C5.425-0.548%2C13.053-0.548%2C13.595%20c0%2C0.829-1.362%2C1.837-1.007%2C2.666s2.48-0.229%2C2.606-1.541c0.127-1.312%2C0.474-4.917%2C0.474-4.917l0.889-5.567l0.03%2C0.178l0.029-0.178%20l0.889%2C5.567c0%2C0%2C0.348%2C3.604%2C0.474%2C4.917s2.251%2C2.37%2C2.606%2C1.541c0.355-0.829-1.007-1.837-1.007-2.666%20c0-0.542-0.525-8.17-0.548-13.596c-0.012-2.882%2C0.396-5.206%2C0.489-5.376c0.142-0.259%2C0.624%2C1.703%2C1.085%2C3.721%20c-0.009%2C0.134-0.02%2C0.248-0.034%2C0.322c-0.145%2C0.751-0.237%2C2.251-0.651%2C3.376c-0.414%2C1.125-0.06%2C2.134%2C0.414%2C2.666%20c0.326%2C0.365%2C0.734%2C0.361%2C1.074%2C0.098c0.34%2C0.268%2C0.749%2C0.271%2C1.075-0.098c0.473-0.532%2C0.827-1.541%2C0.413-2.666%20c-0.413-1.125-0.507-2.625-0.651-3.376c-0.015-0.074-0.023-0.188-0.032-0.322c0.461-2.018%2C0.942-3.979%2C1.085-3.721%20c0.093%2C0.17%2C0.501%2C2.494%2C0.488%2C5.376c-0.021%2C5.426-0.549%2C13.054-0.549%2C13.596c0%2C0.829-1.362%2C1.837-1.007%2C2.666%20c0.354%2C0.829%2C2.479-0.229%2C2.606-1.541c0.126-1.312%2C0.474-4.917%2C0.474-4.917l0.89-5.567l0.028%2C0.178l0.03-0.178l0.889%2C5.567%20c0%2C0%2C0.348%2C3.604%2C0.475%2C4.917c0.125%2C1.312%2C2.25%2C2.37%2C2.605%2C1.541c0.354-0.829-1.007-1.837-1.007-2.666%20c0-0.542-0.526-8.17-0.548-13.596c-0.015-2.882%2C0.396-5.206%2C0.487-5.376c0.27-0.488%2C1.748%2C6.937%2C2.015%2C7.716%20c0.268%2C0.777-0.89%2C1.242-0.533%2C1.955c0.354%2C0.711%2C1.008%2C0.947%2C1.479%2C0.414C27.191%2C19.622%2C27.543%2C18.613%2C27.129%2C17.488z%20M16.127%2C17.785c0.094%2C0.275%2C0.007%2C0.512-0.126%2C0.734c-0.133-0.225-0.22-0.459-0.126-0.734c0.028-0.084%2C0.072-0.249%2C0.126-0.469%20C16.055%2C17.536%2C16.099%2C17.701%2C16.127%2C17.785z%22/%3E%3C/svg%3E');
}

/* Krebs (Cnc) */
.sternzeichen-krebs {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M281.13%2C165.32c27.27%2C10.86%2C68.21%2C29.01%2C86.6%2C52.9%2C4.01%2C5.21%2C8%2C12.41%2C7.26%2C19.74-5.33%2C53.07-33.18%2C114.98-81.07%2C133.8-36.07%2C14.17-75.8%2C5.14-104.94-22.22-23.8-22.35-39.65-52.88-46.53-86.53-3.09-15.11-3.51-31.58%2C6.34-43.18%2C17.27-20.34%2C54.56-36.47%2C78.79-45.42%2C1.19-17.98.35-35.09-2.83-53.12%2C11.87-.18%2C13.82%2C43.78%2C19.13%2C52.68%2C7.33-7.9%2C15.91-8.82%2C22.77-.81l10.79-33.61c1.23-3.84%2C7.02-17.08%2C12.01-16.93.97.03%2C2.46%2C2.16%2C2.52%2C3.22-9.83%2C10.3-11.5%2C25.28-10.84%2C39.49Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M342.75%2C100.55l-29.89-1.93c-23.18-4.41-35.14-15.92-30.76-48.08%2C9.34%2C13.11%2C26.5%2C17.91%2C41.24%2C21.38%2C13.98%2C3.29%2C27.69%2C8.45%2C35.68-4.19%2C3.63-5.74%2C3.64-12.53%2C1.39-18.91-7.97-22.66-35.5-36.94-55.53-46.07%2C26.37-7.33%2C55.7%2C9.39%2C75.78%2C27.57%2C24.04%2C21.77%2C43.45%2C48.58%2C58.66%2C78.53%2C1.43%2C2.81%2C2.38%2C6.46%2C3.03%2C9.18-4.21%2C1.79-7.41%2C3.01-10.67%2C5.39l-21.54%2C15.73c-10.6-14.02-15.66-34.67-30.97-38.74-6.74-1.79-27.91-.1-36.42.14Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M191.44%2C100.3l-31.53-1.93c-8.29-.97-15.05-5.56-26.63%2C1.58-13.91%2C8.58-20.64%2C25.05-31.37%2C39.21l-20.3-14.9c-3.75-2.75-7.23-4.28-11.95-6.31.78-2.94%2C1.88-6.83%2C3.42-9.83%2C15.19-29.66%2C34.44-56.19%2C58.3-77.81C151.45%2C12.14%2C180.76-4.57%2C207.15%2C2.74c-19.89%2C9.1-47.12%2C23.22-55.34%2C45.53-2.31%2C6.26-2.5%2C12.98.82%2C18.8%2C7.54%2C13.19%2C30.89%2C11.65%2C42.62%2C7.62%2C15.49-5.32%2C31.97-12.08%2C42.11-25.13%2C4.47%2C31.21-1.75%2C50.13-45.93%2C50.73Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M382.02%2C213.29c-3.52%2C2.16-16.63-17.39-22.18-21.18%2C4.96-6.09%2C10.6-11.81%2C16.64-17.03%2C21.44-18.51%2C42.89-35.62%2C65.77-52.33%2C9.46%2C12.74%2C9.9%2C24.2-.45%2C36.31-11.99%2C14.03-24.98%2C26.1-38.77%2C37.92-6.83%2C5.85-12.71%2C11.22-21.01%2C16.31Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M131.36%2C214.32c-7.99-5.22-13.96-10.09-20.76-15.96-14.28-12.31-27.92-24.72-40.36-39.31-10.37-12.16-9.79-23.38-.46-36.3%2C23.11%2C16.87%2C44.84%2C34.13%2C66.44%2C52.87%2C5.79%2C5.03%2C11.17%2C10.67%2C16.07%2C16.43-9.83%2C9-10.92%2C12.92-20.93%2C22.27Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M367.25%2C317.09l11.33-26.5c7.18%2C5.38%2C14.37%2C5.96%2C22.13%2C3.44%2C11.53-3.75%2C22.13-9.7%2C32.97-15.63%2C35.97-19.68%2C54.52-49.77%2C75.48-86.19-7.39%2C23.37-17.98%2C44-30.81%2C63.64-10.1%2C15.46-22.23%2C27.62-36.3%2C38.39-21.92%2C16.77-47.44%2C37.72-74.79%2C22.86Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M133.34%2C290.59l11.36%2C26.38c-26.82%2C14.95-52.14-5.53-74.15-22.27-14.88-11.32-27.69-24.24-38.16-40.75-12.14-19.14-22.65-39.08-29.53-61.76%2C11.56%2C20.19%2C22.63%2C39.26%2C37.78%2C56.03%2C11.19%2C12.96%2C23.82%2C22.72%2C38.36%2C30.53%2C13.76%2C6.78%2C39.37%2C25.08%2C54.35%2C11.86Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M161.12%2C354.33c-8.39%2C4.58-17.49%2C4.85-27.01%2C3.82-28.25-3.04-55.47-10.92-81.71-22.93-13.84-6.33-38.78-20.87-45.22-36.89%2C26.55%2C29.84%2C88.3%2C35.75%2C124.34%2C34.29%2C5.74-.23%2C10.84-1.52%2C16.64-2.93l12.96%2C24.63Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M350.83%2C354.51l13.04-24.79c5.53%2C1.37%2C10.37%2C2.66%2C15.81%2C2.9%2C36.13%2C1.61%2C98.63-4.3%2C125.13-34.28-6.53%2C16.07-31.35%2C30.48-45.22%2C36.85-26.24%2C12.05-53.46%2C19.84-81.71%2C22.98-9.54%2C1.06-18.46.6-27.05-3.66Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M398.03%2C496.03c2.49-20.48-1.57-39.7-12.21-56.45-6.97-10.97-15.16-20.86-24.92-29.03l-27.17-22.74c-4.28-3.58-7.66-7.23-11.55-12.2l22-15.62c13.44%2C18.52%2C26.63%2C30.59%2C38.97%2C50.33%2C16.17%2C25.89%2C25.53%2C55.31%2C14.88%2C85.69Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M126.82%2C438.6c-11.01%2C16.91-15.18%2C35.93-12.95%2C56.39-5.68-14.11-5.1-29.61-2.23-44.86%2C9.35-39.26%2C34-60.55%2C56.2-90.12l22.05%2C15.56c-3.82%2C4.76-7.01%2C8.36-11.08%2C11.76l-27.92%2C23.35c-9.3%2C7.78-17.06%2C17.14-24.08%2C27.92Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M317.13%2C510.36c2.49-19.55%2C1.31-37.89-4.07-56.58-4.48-15.84-10.68-30.29-17.5-45-3.57-7.7-6.62-14.73-7.94-23.64l26.04-.94c5.07%2C28.86%2C11.8%2C48.59%2C12.29%2C78.4-.47%2C16.57-1.5%2C32.65-8.84%2C47.76Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M199.63%2C451.47c-5.96%2C19.79-7.29%2C38.6-4.69%2C59.17-7.05-14.89-8.43-31.24-8.79-48.04.37-29.89%2C7.15-49.45%2C12.21-78.39l26.05.92c-1.27%2C8.6-4.14%2C15.48-7.6%2C22.94-6.55%2C14.1-12.47%2C27.85-17.17%2C43.4Z%22%2F%3E%0A%3C%2Fsvg%3E');
}

/* Löwe (Leo) */
.sternzeichen-loewe {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2031.611%2031.611%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M16.207%2C12.926c-1.268%2C2.979%2C5.197%2C3.232%2C8.113%2C4.69s4.247%2C4.501%2C4.942%2C4.501c3.613-4.818-2.026-11.41-2.026-11.41%20s-2.154-0.634-2.601-2.726c-0.443-2.092%2C1.521-5.198%2C1.204-3.613c-0.314%2C1.584%2C1.966%2C2.409%2C2.221%2C3.486%20c0.253%2C1.077-0.063%2C2.853-0.063%2C2.853s6.148%2C3.74%2C2.346%2C12.551c1.458%2C5.896-1.772%2C5.896-1.772%2C5.896s1.076%2C2.092-1.966%2C2.092%20c-3.043%2C0-4.816%2C0-7.543%2C0c-2.728%2C0-0.763-2.282%2C0.441-2.282s2.185%2C0.038%2C2.662%2C0c-0.159%2C0.011-3.655-0.271-2.911-2.622%20c-4.463%2C0.366-10.272-1.435-10.272-1.435s-2.823%2C6.768-4.915%2C6.704c-2.092-0.062-3.781%2C0.125-3.625-1%20c0.344-2.25%2C3.438-0.094%2C3.722-4.375c0.19-2.471%2C1.584-4.311%2C1.584-4.311s-3.866-2.6-2.598-10.078%20c-0.438%2C0.036-1.648%2C0.253-2.029-0.508c-0.38-0.76%2C0-1.647%2C0-1.647s-1.615-2.189-0.918-3.457c0.696-1.269%2C3.555-1.644%2C4.886-1.771%20c0.542-5.167%2C2.825-5.079%2C6.375-3.557C17.293%2C0.212%2C18.795%2C9.217%2C16.207%2C12.926z%22/%3E%3C/svg%3E');
}

/* Jungfrau (Vir) */
.sternzeichen-jungfrau {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M273%2C0c20.79%2C2.16%2C41.29%2C5.43%2C61.02%2C14.17%2C26.93%2C11.93%2C47.78%2C31.98%2C62.44%2C57.46%2C11.32%2C19.67%2C18.23%2C40.41%2C24.75%2C62.22%2C6.93%2C23.16%2C10.97%2C45.72%2C10.3%2C70.32-1.58%2C57.74-17.5%2C114.15-45.6%2C164.56-16.3%2C29.24-39.13%2C58.25-68.85%2C74.16-11.43%2C6.12-23.17%2C8.88-36.2%2C9.85-36.07%2C2.69-71.02%2C7.9-106.03%2C17.02-27.23%2C7.09-67.92%2C19.8-86.48%2C41.3-1.12-16.83%2C16.42-31.8%2C29.06-39.63%2C32.52-20.14%2C78.21-32.03%2C115.79-39.18%2C40.94-7.79%2C87.54-22.14%2C98.49-68.75-31.25%2C24.83-67.69%2C41.93-107.41%2C45.65-20.41%2C1.91-39.37%2C4.31-58.51%2C11.7l-18.72%2C7.23c-20.14%2C7.78-51.73%2C26.41-62.25%2C46.12-4.4-17.84%2C17.92-38.39%2C29.92-47.55%2C21.78-16.64%2C46.21-28.6%2C72.6-36.14%2C11.61-3.32%2C22.68-4.58%2C34.68-5.23%2C45.06-2.42%2C94.46-27.62%2C92.89-79.53-13.06%2C18.85-28.75%2C34.57-48.54%2C45.59-26.31%2C14.66-34.75%2C4.21-67.1%2C14.99-39.58%2C13.18-87.04%2C36.94-118.09%2C65.56%2C4.04-20.06%2C22.59-38.89%2C38.23-50.62%2C24.16-18.12%2C51.24-30.99%2C80.3-39.37%2C22.31-6.44%2C30.95-1.14%2C50.15-14.22%2C15.06-10.25%2C27.11-23.87%2C35.7-39.93%2C3.78-7.06%2C8.89-20.42.65-25.93-25.99-17.36-44.38-59.01-55.46-87.42l-21.37-54.74c-5.7-14.6-23.25-53.25-36.87-61.11-.68-16.64%2C7.11-32.61%2C20.87-42.04%2C9.11-6.25%2C19.6-8.04%2C30.73-7.65%2C31.78%2C1.11%2C63.05%2C23.92%2C90.92%2C38.99%2C4.32-11.23-11.72-21.49-20.29-25.33-11.75-5.26-23.46-9.3-35.58-13.63-3.95-1.41-7.07-3.03-10.68-5.42l3.53-3.48h21ZM356.23%2C135.53c23.11-40.09%2C3.86-82.27-36.59-107.27%2C25.97%2C30.45%2C40.26%2C63.83%2C36.59%2C107.27ZM396.92%2C128.1c-5.62-18.01-13.46-35.01-24.05-49.96%2C20.62%2C56.9%2C21.2%2C114.26-15.94%2C164.35%2C43.41-24.34%2C55.02-66.22%2C39.99-114.4Z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M131.18%2C273.71c-1.72.05-4.48-1.09-5.3-2.18s-1.01-4.7-.13-5.72l4.26-4.92c-2.41-1.78-5.71-4.3-7.04-6.26-3.53-5.21.8-7.34%2C3.34-10.36%2C5.09-6.05%2C6.19-14.97%2C7.05-23.19l-14.64-1.99c-1.8-.24-4.6-1.64-5.54-2.92-7.37-10.16%2C17.15-28.88%2C18.94-42.98%2C3.41-26.9%2C8.44-53.07%2C18.69-78.1%2C2.72-6.64%2C9.77-22.13%2C17.52-21.03%2C4.61.65%2C9.01%2C12.92%2C10.44%2C17.31l17.27%2C52.81c14.68%2C44.89%2C45.12%2C96.11%2C80.99%2C127.57-6.89%2C11.85-16.59%2C20.34-28.3%2C26.99-24.93%2C14.16-53.31%2C21.04-82.03%2C20.77-7.96-.08-15.53-1.55-22.49-4.53-4.47-1.91-6.95-5.76-8.28-9.97-5.44-17.25%2C11.95-16.81%2C6.98-31.65l-11.74.36ZM184.29%2C163.45c0-3.67-13.53-15.16-37.29-13.45-4.41.32-8.33%2C30.42-3.73%2C30.69%2C27.11%2C1.6%2C41.02-13.82%2C41.02-17.24Z%22/%3E%3C/svg%3E');
}

/* Waage (Lib) */
.sternzeichen-waage {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M30.271%2C20.987l-3.307-10.309h-0.838v-0.564c1.639-0.404%2C1.667-2.02%2C1.667-2.02s-0.621%2C0.729-1.667%2C1.012V8.66h-0.654%20v0.555c-0.027%2C0.001-0.052%2C0.008-0.08%2C0.009c-1.49%2C0.036-2.162-2.436-4.037-2.436c-1.746%2C0-3.696%2C1.039-4.957%2C1.183V5.158%20c0.892-0.139%2C1.574-0.901%2C1.574-1.831c0.002-1.026-0.832-1.859-1.859-1.859c-1.026%2C0-1.859%2C0.833-1.859%2C1.859%20c0%2C0.98%2C0.762%2C1.775%2C1.725%2C1.847V7.95c-1.261-0.199-3.132-1.162-4.816-1.162c-1.875%2C0-2.545%2C2.472-4.036%2C2.436%20C7.006%2C9.22%2C6.895%2C9.201%2C6.781%2C9.186V8.66H6.127v0.373c-0.887-0.322-1.4-0.938-1.4-0.938s0.028%2C1.431%2C1.4%2C1.934v0.649H5.29%20l-3.365%2C10.31H0c0%2C0%2C1.381%2C2.639%2C6.327%2C2.639c4.946%2C0%2C6.327-2.639%2C6.327-2.639h-1.729L7.62%2C10.679H6.781v-0.496%20c0.132%2C0.014%2C0.27%2C0.022%2C0.419%2C0.022c2.437%2C0%2C2.8-1.545%2C4.146-1.545c1.211%2C0%2C2.63%2C1.504%2C4.379%2C1.808%20c0.075%2C0.021%2C0.442-0.004%2C0.332%2C0.023L16%2C16.268l-1.111%2C2.25l0.038%2C6.778h-3.054v1.199l-2.455%2C4.037h13.963l-3-4.092v-1.146h-2.672%20v-6.716l-1.125-2.364l-0.001-5.737c0.101-0.001%2C0.097%2C0.021%2C0.213-0.01c1.749-0.304%2C3.168-1.808%2C4.379-1.808%20c1.347%2C0%2C1.709%2C1.545%2C4.146%2C1.545c0.056%2C0%2C0.102-0.006%2C0.152-0.008v0.48h-0.836l-3.365%2C10.309h-1.926c0%2C0%2C1.381%2C2.639%2C6.327%2C2.639%20S32%2C20.987%2C32%2C20.987H30.271z%20M6.127%2C20.987H2.614l3.15-9.653h0.363V20.987z%20M7.143%2C11.333l3.096%2C9.652H6.781v-9.652H7.143z%20M25.473%2C20.987h-3.514l3.15-9.653h0.363V20.987L25.473%2C20.987z%20M26.127%2C20.987v-9.654h0.361l3.096%2C9.652L26.127%2C20.987%20L26.127%2C20.987z%22/%3E%3C/svg%3E');
}

/* Skorpion (Sco) */
.sternzeichen-skorpion {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M17.479%2C15.826c6.018-7.785%2C12.054%2C2.011%2C12.994%2C1.41c0.938-0.602-0.15-8.914-7.41-8.764%20c-7.257%2C0.15-9.364%2C8.764-9.364%2C8.764l-2.482%2C0.302c0%2C0%2C0.79-2.935%2C1.467-3.01c-0.802-0.526-1.01-0.276-1.467-0.113%20c-0.765%2C0.238-2.069%2C3.123-2.069%2C3.123H7.681c0%2C0%2C0.289-1.832%2C1.166-2.521c-0.197-0.386-0.724-0.387-1.166-0.302%20c-1.091%2C0.238-1.617%2C2.797-2.407%2C3.237c-1.642%2C1.188-4.877-3.773%2C1.204-5.005c7.008-1.454%2C11.622-3.735%2C7.672-8.725%20C10.751-0.065%2C3.63%2C5.625%2C5.047%2C9.111c0.489%2C0.401%2C5.955-4.338%2C6.206-1.053c0.301%2C1.931-7.221%2C3.034-8.65%2C4.476%20c-6.87%2C4.701%2C2.031%2C9.439%2C2.031%2C9.439s0.809%2C3.705%2C2.67%2C4.363c0.499%2C0.063%2C0.837-0.32%2C1.128-0.414%20c-1.74-1.938-1.523-3.207-1.354-3.311s1.862%2C0.291%2C2.068%2C0.489c0.207%2C0.197%2C0.179%2C2.087%2C2.069%2C3.234%20c0.385%2C0.188%2C1.279%2C0.188%2C1.392%2C0c-1.082-1.553-0.894-2.567-0.79-2.709c0.104-0.143%2C2.975-0.1%2C3.046%2C0.112%20c0.071%2C0.212%2C1.994%2C6.995%2C10.681%2C5.304c8.688-1.692%2C6.306-9.893%2C5.691-9.778c-0.614%2C0.112-1.78%2C6.056-6.625%2C6.657%20c-2.745%2C0.264-5.647-2.767-5.836-3.065c-0.188-0.301%2C4.646%2C0.292%2C4.23-2.588c0.305-0.797%2C2.745-0.982%2C2.596-1.474%20c-0.149-0.49-2.803%2C0.104-2.765-1.063C22.535%2C13.372%2C16.875%2C16.728%2C17.479%2C15.826z%22/%3E%3C/svg%3E');
}

/* Schütze (Sgr) */
.sternzeichen-schuetze {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M150.037%2C428.586c1.781%2C4.797%2C3.529%2C9.878%2C5.267%2C15.189l157.583-44.245l-13.047-13.037L150.037%2C428.586z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M386.406%2C298.43l13.026%2C13.026l43.676-155.485c-5.496-1.781-10.501-3.53-15.221-5.234L386.406%2C298.43z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M109.409%2C129.22c2.93-3.321%2C5.956-6.567%2C9.059-9.746c3.737-3.672%2C7.606-7.179%2C11.54-10.589L83.993%2C62.87%20l36.245-14.676c2.972-1.179%2C4.874-4.109%2C4.721-7.299c-0.142-3.169-2.272-5.945-5.322-6.884L10.429%2C0.332%20c-2.688-0.819-5.584-0.098-7.561%2C1.88C0.89%2C4.19%2C0.158%2C7.096%2C0.999%2C9.773l33.668%2C109.208c0.929%2C3.059%2C3.682%2C5.18%2C6.872%2C5.322%20c3.192%2C0.131%2C6.12-1.738%2C7.322-4.677l14.675-36.289L109.409%2C129.22z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M339.878%2C318.755L190.402%2C169.28c-2.983%2C2.623-5.889%2C5.333-8.731%2C8.152l-2.272%2C2.328l-2.71%2C2.656%20c-2.348%2C2.371-4.621%2C4.786-6.84%2C7.233L319.4%2C339.222l-3.956%2C40.136l61.543%2C61.543l7.726-56.833l56.854-7.736L380.014%2C314.8%20L339.878%2C318.755z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M500.903%2C85.522c-13.921-13.932-36.584-13.932-50.505%2C0c-2.699%2C2.688-4.918%2C5.747-6.622%2C9.135%20c-6.982-0.405-16.752-4.459-23.046-7.07l-10.13-3.78c-3.584-1.378-7.409-2.754-11.058-3.989%20c-31.34-10.545-62.439-16.314-92.424-17.177c-32.892-1.038-65.783%2C4.25-95.068%2C15.309c-29.701%2C11.036-58.057%2C29.253-82.086%2C52.746%20c-23.429%2C23.953-41.633%2C52.32-52.67%2C81.978c-11.059%2C29.328-16.347%2C62.22-15.32%2C95.089c0.853%2C30.006%2C6.644%2C61.105%2C17.188%2C92.456%20c1.236%2C3.628%2C2.612%2C7.452%2C3.967%2C11.004l3.868%2C10.348c2.547%2C6.131%2C6.601%2C15.877%2C7.005%2C22.87c-3.387%2C1.705-6.459%2C3.923-9.146%2C6.612%20c-13.921%2C13.921-13.921%2C36.584%2C0%2C50.505c13.921%2C13.922%2C36.584%2C13.922%2C50.506%2C0c7.408-7.408%2C11.156-17.548%2C10.359-27.974%20l0.044-0.239l-0.087-0.832c-0.306-2.961-0.82-5.551-1.301-7.824c-0.743-3.825-1.737-7.223-2.688-10.502l-0.798-2.742%20c-2.534-8.086-5.278-15.691-7.9-22.772l-12.053-31.668c-1.202-3.256-2.262-6.326-3.344-9.649%20c-8.807-26.444-12.829-53.228-11.999-79.584c0.896-26.674%2C6.95-53.02%2C17.55-76.186c10.25-22.423%2C24.466-42.825%2C42.266-60.614%20l2.536-2.492l2.36-2.415c17.8-17.789%2C38.191-32.017%2C60.625-42.245c23.166-10.621%2C49.5-16.686%2C76.163-17.56%20c26.38-0.841%2C53.15%2C3.19%2C79.606%2C11.988c3.311%2C1.082%2C6.393%2C2.153%2C9.583%2C3.311l31.778%2C12.107c7.037%2C2.6%2C14.654%2C5.354%2C22.882%2C7.934%20l2.579%2C0.754c3.288%2C0.94%2C6.687%2C1.934%2C10.403%2C2.667c2.381%2C0.491%2C4.983%2C1.016%2C7.889%2C1.31l1.006%2C0.077l0.142-0.032%20c10.403%2C0.787%2C20.554-2.962%2C27.94-10.359C514.825%2C122.096%2C514.825%2C99.432%2C500.903%2C85.522z%22/%3E%3C/svg%3E');
}

/* Steinbock (Cap) */
.sternzeichen-steinbock {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2030.354%2030.354%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M18.829%2C28.559c1.036-0.002%2C1.396%2C1.449%2C0.948%2C1.449c-0.446%2C0-1.979%2C0.004-2.239%2C0.004s-0.22-0.537-0.178-1.043%20c0.042-0.504-0.736-5.443-0.896-5.932c-0.158-0.488-1.062%2C0.025-4.854%2C0.053c-3.794%2C0.023-4.612-1.057-4.636-0.25%20c-0.025%2C0.808-0.47%2C1.795-0.281%2C2.334c0.188%2C0.537%2C0.514%2C3.019%2C0.795%2C3.459c0.743-0.078%2C1.225%2C1.271%2C0.744%2C1.271%20c-0.482%2C0-1.674%2C0.021-1.914%2C0.021c-0.241%2C0-0.121-0.623-0.102-0.979c0.021-0.355-0.717-2.32-1.084-2.861%20c-0.365-0.539-0.481-3.328-0.481-3.328s-2.383%2C2.455-2.449%2C2.846c-0.065%2C0.391-0.009%2C3.249-0.009%2C3.551%20c0.782%2C0.08%2C1.131%2C1.168%2C0.75%2C1.168c-0.381%2C0-1.688%2C0.031-1.979%2C0.031c-0.294%2C0-0.188-1.096-0.108-1.312%20c0.078-0.219-0.418-2.582-0.418-3.567c0-0.987%2C1.838-3.748%2C1.838-4.529c0-0.78-0.626-2.368-0.531-4%20c0.144-2.442%2C1.648-3.681%2C4.039-3.701c4.488-0.04%2C4.326%2C1.723%2C8.696%2C1.042c5.21-0.812%2C8.815-1.724%2C7.963-4.135%20c0%2C0-0.462-0.955-0.354-1.456c0.108-0.5%2C0.354-0.759%2C0.354-0.759s-6.435-5.003-10.544-5.933c0.5-1.286%2C6.541%2C1.394%2C6.541%2C1.394%20S17.083%2C1.431%2C12.83%2C0.18c4.539-1.537%2C10.687%2C7.292%2C10.687%2C7.292s3.697%2C1.362%2C6.381%2C6.438c0.143%2C1.395-0.587%2C1.697-1.312%2C1.508%20c-0.724-0.189-1.291-0.812-2.176-0.644c-0.785%2C0.147-3.99%2C4.343-3.941%2C5.101c0.05%2C0.756%2C0.951%2C4.11%2C1.097%2C4.588%20c0.183%2C0.602-0.289%2C1.957-0.278%2C2.268c0.01%2C0.311%2C0.269%2C0.346%2C0.44%2C0.885c0.17%2C0.537%2C0.118%2C1.483-0.604%2C1.645%20c-0.55-0.551-1.099-1.098-1.328-1.327c-0.229-0.229%2C0.316-0.61%2C0.348-0.759c0.029-0.148%2C0.17-1.836-0.189-2.52%20c-0.363-0.683-2.047-2.938-2.047-2.938s-1.5%2C2.136-1.438%2C3.291C18.558%2C25.789%2C18.731%2C28.322%2C18.829%2C28.559z%22/%3E%3C/svg%3E');
}

/* Wassermann (Aqr) */
.sternzeichen-wassermann {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M24.004%2C14.738c0.874-0.521%2C2.298-0.877%2C3.862-1.34c-0.293-1.714-0.818-4.452-1.523-6.57%20c-0.654-1.963-3.781-4.526-5.992-6.101c-1.053%2C1.12-1.487%2C2.884-2.489%2C3.753c-0.945%2C0.819-2.587%2C0.694-2.909%2C0.604%20c-0.686-0.191-2.167-0.192-1.152-2.305c-0.631%2C0.028-3.229%2C0.775-1.591%2C2.743c1.638%2C1.968%2C5.373%2C3.161%2C5.597%2C3.236%20c-2.11%2C1.976-7.646%2C3.93-9.983%2C3.676S2.721%2C9.212%2C5.245%2C8.43c2.523-0.781%2C3.744%2C0.967%2C1.098%2C1.591%20c0.994%2C0.563%2C4.601%2C0.22%2C4.827-1.7c0.225-1.922-4.63-6.187-8.888-1.866c-4.258%2C4.32%2C1.584%2C7.961%2C2.578%2C8.229%20c6.947%2C2.427%2C13.51-5.163%2C13.51-5.163l0.473%2C0.638c0%2C0-10.101%2C7.075-12.227%2C11.383c-2.66%2C4.854-1.344%2C13.057%2C6.09%2C9.655%20c7.557-3.531-1.944-9.555-3.49-5.856c-1.118%2C2.676%2C2.214%2C3.305%2C2.55%2C2.465c0.191-0.479-0.349-0.762-0.659-0.816%20c-0.31-0.056-0.126-0.498%2C0.001-0.6c0.734-0.517%2C1.844-0.021%2C2.146%2C0.969c0.35%2C1.377-3.358%2C3.608-5.066%2C1.048%20c-2.083-3.166%2C1.313-5.979%2C2.89-5.804c0.863-4.4%2C8.238-11.904%2C8.238-11.904l0.74%2C0.779c0%2C0-8.475%2C9.631-8%2C11.282%20c2.846%2C1.021%2C4.214%2C2.688%2C4.631%2C4.737c2.479%2C0.11%2C8.619%2C0.462%2C9.99-3.378c1.371-3.842-2.184-5.992-2.893-6.524%20C23.077%2C17.06%2C22.716%2C15.507%2C24.004%2C14.738z%20M20.774%2C24.234c-1.946%2C0.109-5.167-1.094-5.083-3.918%20c0.083-2.823%2C3.959-6.696%2C4.632-6.964c0.672-0.268%2C1.547%2C3.119%2C1.37%2C4.148c-0.179%2C1.027-4.509%2C1.382-3.495%2C3.931%20c0.426%2C1.045%2C1.519%2C1.604%2C2.176%2C1.246c0.658-0.357%2C0.974-1.21%2C0.438-1.951C23.772%2C20.561%2C22.722%2C24.127%2C20.774%2C24.234z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M29.518%2C3.054c-1.938-2.558-5.775-3.315-7.823-2.979c2.141%2C1.576%2C5.153%2C4.106%2C5.896%2C6.337%20c0.713%2C2.137%2C1.237%2C4.81%2C1.543%2C6.576c0.334-0.132%2C0.885-0.325%2C1.215-0.495C31.497%2C11.896%2C31.877%2C6.164%2C29.518%2C3.054z%22/%3E%3C/svg%3E');
}

/* Fische (Psc) */
.sternzeichen-fische {
    background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2031.999%2031.999%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M15.151%2C14.714c0%2C0%2C0.156%2C0.314%2C0.301%2C0.349c1.052%2C0.248%2C5.739%2C1.314%2C7.087%2C0.471c0.72-0.479-1.918-2.733-1.918-2.733%20s3.114%2C1.438%2C3.645%2C0.912c1.928-3.104-3.041-8.21-4.304-9.415c-0.317-0.357-0.551-0.089-0.551-0.089l-5.896%2C4.085L15.151%2C14.714z%20M20.597%2C8.917c0.517%2C0%2C0.935%2C0.419%2C0.935%2C0.935c0%2C0.517-0.418%2C0.936-0.935%2C0.936c-0.516%2C0-0.935-0.419-0.935-0.936%20C19.663%2C9.336%2C20.082%2C8.917%2C20.597%2C8.917z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M13.639%2C14.441c0.646%2C0.036%2C0.46-0.681%2C0.46-0.681l-1.485-5.896l6.305-4.127c0%2C0%2C0.42-0.278%2C0.021-0.529%20c-1.004-0.856-3.944-3.286-4.934-3.206c-1.199%2C0.096-0.911%2C3.26-1.774%2C3.068C3.218%2C3.5%2C0.019%2C19.051%2C0.438%2C19.56%20c0.419%2C0.51%2C0.761%2C0.869%2C1.533%2C0.289c0.787%2C1.709-1.033%2C5.582-1.64%2C7.166c-0.158%2C0.479%2C0.244%2C0.353%2C0.521%2C0.116%20C2.244%2C25.74%2C3.23%2C25.246%2C3.788%2C25.3c0.557%2C0.055%2C1.844%2C0.543%2C2.591%2C0.96c0.357%2C0.263%2C0.771%2C0.19%2C0.393-0.349%20C0.946%2C13.647%2C10.901%2C14.159%2C13.639%2C14.441z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M16.848%2C17.283c0%2C0-0.154-0.313-0.301-0.35c-1.05-0.248-5.737-1.313-7.086-0.472c-0.719%2C0.479%2C1.917%2C2.732%2C1.917%2C2.732%20s-3.115-1.436-3.643-0.909c-1.93%2C3.104%2C3.04%2C8.21%2C4.303%2C9.415c0.317%2C0.356%2C0.551%2C0.089%2C0.551%2C0.089l5.896-4.086L16.848%2C17.283z%20M11.402%2C23.08c-0.516%2C0-0.935-0.419-0.935-0.936s0.419-0.937%2C0.935-0.937c0.517%2C0%2C0.935%2C0.42%2C0.935%2C0.937%20S11.919%2C23.08%2C11.402%2C23.08z%22/%3E%3Cpath%20fill%3D%22rgba%28255%2C%20255%2C%20255%2C%200.9%29%22%20d%3D%22M31.149%2C4.866c-1.392%2C1.391-2.379%2C1.885-2.937%2C1.831c-0.559-0.054-1.844-0.543-2.59-0.96%20c-0.358-0.263-0.771-0.19-0.395%2C0.349c5.824%2C12.265-4.131%2C11.753-6.869%2C11.47c-0.646-0.035-0.459%2C0.683-0.459%2C0.683l1.484%2C5.896%20l-6.304%2C4.127c0%2C0-0.42%2C0.278-0.021%2C0.529c1.004%2C0.854%2C3.945%2C3.286%2C4.935%2C3.207c1.196-0.099%2C0.909-3.263%2C1.772-3.068%20c9.014-0.432%2C12.213-15.98%2C11.793-16.491c-0.42-0.509-0.762-0.868-1.533-0.288c-0.787-1.709%2C1.033-5.583%2C1.643-7.166%20C31.826%2C4.504%2C31.425%2C4.632%2C31.149%2C4.866z%22/%3E%3C/svg%3E');
}