*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  }

  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :root{
    --ui-text-color: #ffffff;
    --card-bg: rgba(0,0,0,0.18);
    --card-border: rgba(255,255,255,0.16);
    --card-shadow: rgba(0,0,0,0.45);
    --card-inset: rgba(255,255,255,0.20);

    /* Glassiness */
    --card-blur: 14px;
    --card-sat: 1.25;

    /* ✅ UI Scale (Zoom) */
    --ui-scale: 1;
  }

  body{
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    color: white;
    position: relative;
    background: #000;

    display: grid;
    place-items: center;
    padding: 0;
  }

  body::after,
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 1.2s ease, filter 1.2s ease;
  }

  body::after{
    background-image: var(--bg-current, none);
    opacity: 1;
    filter: var(--bg-filter, none);
  }

  body::before{
    background-image: var(--bg-next, none);
    opacity: 0;
    filter: var(--bg-filter, none);
  }

  body.bg-fading::before{ opacity: 1; }
  body.bg-fading::after { opacity: 0; }

  .night-tint{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.22);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  body.mode-night .night-tint{ opacity: 1; }

  .weather-container{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    touch-action: manipulation;
  }

.weather-info{
  position: fixed;
  top: 50%;
  left: 50%;
  /* ✅ Zoom integriert */
  transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
  text-align: center;
  width: clamp(300px, 92vw, 420px);
  padding: clamp(18px, 3.2vw, 28px);
  border-radius: 22px;

  background: var(--card-bg);
  border: 1px solid var(--card-border);

  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-sat));

  box-shadow:
    0 22px 60px var(--card-shadow),
    inset 0 1px 0 var(--card-inset);

  z-index: 100;
  min-width: 0;
  max-width: 92vw;
}

  .weather-info,
  .weather-info *{
    color: var(--ui-text-color);
  }

  .weather-info .detail-item i,
  .location i{
    color: color-mix(in srgb, var(--ui-text-color) 85%, #4dabf7 15%);
  }

  /* ✅ Sekunden ausblenden, wenn Setting aktiv */
  body[data-show-seconds="0"] .time [data-key="seconds"]{
    display: none !important;
  }

.settings-btn{
  position: fixed;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);

  z-index: 500;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(6px);

  display: grid;
  place-items: center;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  box-shadow:
    0 10px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

  .settings-btn i{
    font-size: 16px;
    color: color-mix(in srgb, var(--ui-text-color) 85%, #4dabf7 15%);
  }

  /* ===== Modal ===== */
  .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;

    /* ✅ Mobile scroll fix: verhindert "Scroll-Weitergabe" an den Body */
    overscroll-behavior: contain;
    touch-action: manipulation;
  }
  .modal-backdrop.show{ display: flex; }

  .modal{
    width: min(520px, 95vw);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.35);
    box-shadow: 0 26px 80px rgba(0,0,0,0.6);
    overflow: hidden;

    /* ✅ Mobile scroll fix: Modal als flex + begrenzte Höhe */
    max-height: calc(100svh - 36px); /* 18px padding oben/unten im Backdrop */
    display: flex;
    flex-direction: column;
  }

  .modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 auto;
  }

  .modal-title{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }

  .modal-close{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .modal-close i{ font-size: 14px; }

  .modal-body{
    padding: 14px 16px 4px;

    /* ✅ Mobile scroll fix: hier scrollt der Inhalt */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0; /* wichtig für flex-scroll in Safari/iOS */
  }

  .settings-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .setting-row{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.18);
    border-radius: 14px;
  }

  .setting-label{
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .setting-label b{
    font-size: 14px;
    font-weight: 800;
  }

  .setting-label span{
    font-size: 12px;
    opacity: 0.85;
  }

  .setting-control{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .setting-control input[type="color"]{
    width: 42px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .setting-control input[type="range"]{
    width: 180px;
  }

  .value-pill{
    min-width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    opacity: 0.95;
  }

  .modal-footer{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 auto;
  }

  .btn{
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.22);
    color: var(--ui-text-color);
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .btn.primary{
    background: rgba(77,171,247,0.22);
  }

  /* ===== existing styles below (unchanged) ===== */
  .location{
    margin-top: 30px;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
  }

  .location i{
    font-size: 28px;
    margin-right: 12px;
    color: #ffdd40;
    display: none;
  }

  .location h1{
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.05;
  }

  .temperature{
    font-size: 72px;
    font-weight: 800;
    margin: 10px 0 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  .conditions{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
  }

  .details{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    font-size: 18px;
    justify-items: center;
    text-align: center;
  }

  .detail-item{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detail-item i{
    margin-right: 10px;
    width: 22px;
    font-size: 18px;
    color: #4dabf7;
  }

  .forecast{
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .forecast-day{
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.18);
    border-radius: 16px;
    padding: 10px 8px;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    max-width: 80px;
    margin-left: 18px;
  }

  .forecast-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.2px;
  }

  .forecast-icon{
    font-size: 18px;
    line-height: 1;
  }

  .forecast-temps{
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.95;
  }

  .forecast-temps span{
    opacity: 0.85;
    font-weight: 600;
  }

	@media (max-width: 420px){
	  .forecast{
		grid-template-columns: repeat(3, 1fr) !important;
	  }
	}

  .time{
    font-weight: 800;
    letter-spacing: 0.7px;
    opacity: 0.99;
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }

  .tick-text-inline{
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    margin: 0 8px;
    transform: translateY(-2px);
  }

  .time .tick{
    transform: scale(1.08);
    transform-origin: center top;
  }
  .time *{
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .time [data-view="flip"]{
    display: inline-block;
    width: 2em;
    height: 1.5em;
  }
  .time [data-layout]{
    display: inline-flex;
    align-items: flex-start;
  }

  @media (max-width: 420px){
    .tick-text-inline{ font-size: 36px; margin: 0 6px; }
    .time .tick{ transform: scale(0.98); }
  }

  #animations-container{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }

  .sun{
    position: absolute;
    top: 80px;
    right: 100px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ffdd40, #ff9500);
    border-radius: 50%;
    box-shadow: 0 0 50px #ff9500, 0 0 100px rgba(255, 149, 0, 0.5);
    animation: sunGlow 3s infinite alternate;
  }

  .sun-ray{
    position: absolute;
    top: 50%;
    left: 127%;
    width: 130px;
    height: 4px;
    background: linear-gradient(to right, transparent, #ff9500, transparent);
    transform-origin: left center;
    opacity: 0.2;
    z-index:-1;
  }

  @keyframes sunGlow{
    0% { box-shadow: 0 0 50px #ff9500, 0 0 100px rgba(255, 149, 0, 0.5); }
    100% { box-shadow: 0 0 70px #ffdd40, 0 0 140px rgba(255, 221, 64, 0.7); }
  }

.raindrop{
  position: absolute;
  top: -30px;
  width: var(--drop-width, 1px);
  height: var(--drop-height, 10px);

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(200, 220, 255, 0.6) 10%,
    rgba(100, 150, 255, 0.4) 60%,
    rgba(50, 100, 255, 0.2) 80%
  );

  border-radius: 0 0 10px 10px;

  box-shadow:
    0 0 3px rgba(100, 150, 255, 0.12),
    0 0 6px rgba(100, 150, 255, 0.08);

  animation: rainFall var(--fall-duration, 1s) linear infinite;
  transform-origin: top center;
  opacity: var(--drop-opacity, 0.6);

  image-rendering: optimizeQuality;
  filter: blur(0.15px);
}

 
.raindrop.small  { --drop-width: 1px; --drop-height: 5px;  --fall-duration: 1.6s; --drop-opacity: 0.35; }
.raindrop.medium { --drop-width: 1px; --drop-height: 8px;  --fall-duration: 1.1s; --drop-opacity: 0.50; }
.raindrop.large  { --drop-width: 1px; --drop-height: 10px; --fall-duration: 0.8s; --drop-opacity: 0.65; }



  @keyframes rainFall{
    0%   { transform: translateY(0) translateX(0) rotateX(0deg) rotateY(0deg) scaleY(1);   opacity: var(--drop-opacity, 0.6); }
    30%  { transform: translateY(30vh) translateX(calc(var(--sway-amount, 10px) * 0.3)) rotateX(5deg) rotateY(calc(var(--sway-direction, 1) * 2deg)) scaleY(1.1); opacity: var(--drop-opacity, 0.6); }
    70%  { transform: translateY(70vh) translateX(calc(var(--sway-amount, 10px) * 0.7)) rotateX(3deg) rotateY(calc(var(--sway-direction, 1) * -1deg)) scaleY(1.05); opacity: var(--drop-opacity, 0.6); }
    100% { transform: translateY(100vh) translateX(var(--sway-amount, 10px)) rotateX(0deg) rotateY(0deg) scaleY(1); opacity: 0.1; }
  }

  .windy-rain .raindrop { --sway-amount: 50px; --fall-duration: 0.8s; }
  .heavy-rain .raindrop { --drop-opacity: 0.8; filter: blur(0.5px); }

  .rain-layer{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
  .rain-layer.front{ z-index: 10; }
  .rain-layer.back { z-index: 5; opacity: 0.5; filter: blur(1px); }

  .snowflake{
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 0 0 10px white;
    animation: snowFall linear infinite;
  }
  @keyframes snowFall{ to { transform: translateY(100vh) rotate(360deg); } }

  .fogwrapper{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    pointer-events: none;
    -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
    filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
    opacity: 1;
  }
  #foglayer_01, #foglayer_02, #foglayer_03{
    height: 100%;
    position: absolute;
    width: 200%;
    top: 0;
    left: 0;
  }
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    float: left;
    height: 100%;
    width: 50%;
  }

  #foglayer_01{
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  }
  #foglayer_02, #foglayer_03{
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  }
  #foglayer_01 .image01, #foglayer_01 .image02{
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
  }
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
  }

  @keyframes foglayer_01_opacity { 0%{opacity:.1;} 22%{opacity:.5;} 40%{opacity:.28;} 58%{opacity:.4;} 80%{opacity:.16;} 100%{opacity:.1;} }
  @keyframes foglayer_02_opacity { 0%{opacity:.5;} 25%{opacity:.2;} 50%{opacity:.1;} 80%{opacity:.3;} 100%{opacity:.5;} }
  @keyframes foglayer_03_opacity { 0%{opacity:.8;} 27%{opacity:.2;} 52%{opacity:.6;} 68%{opacity:.3;} 100%{opacity:.8;} }
  @keyframes foglayer_moveme { 0%{left:0;} 100%{left:-100%;} }

  .cloud{
    position: absolute;
    width: 220px;
    height: 90px;
    border-radius: 999px;
    --cloud-base: rgba(255, 255, 255, 0.2);
    --cloud-highlight: rgba(255, 255, 255, 0.2);
    --cloud-speed: 90s;
    --cloud-wobble: 6s;
    --cloud-wobble-amp: 6px;
    --cloud-opacity: 0.22;

    background:
      radial-gradient(circle at 30% 35%, var(--cloud-highlight) 0 45%, transparent 70%),
      radial-gradient(circle at 55% 30%, var(--cloud-highlight) 0 42%, transparent 72%),
      radial-gradient(circle at 70% 45%, rgba(255,255,255,0.85) 0 38%, transparent 70%),
      radial-gradient(circle at 50% 70%, rgba(255,255,255,0.35) 0 55%, transparent 78%),
      linear-gradient(to bottom, rgba(255,255,255,0.10), transparent 60%),
      var(--cloud-base);

    filter: blur(2.2px);
    opacity: var(--cloud-opacity);
    will-change: transform;

    animation:
      cloudMove var(--cloud-speed) linear infinite,
      cloudWobble var(--cloud-wobble) ease-in-out infinite;
  }

  .cloud::before,
  .cloud::after{
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.95;
    filter: blur(2.0px);
    background: radial-gradient(circle at 40% 40%,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.70) 55%,
      rgba(255,255,255,0.0) 78%
    );
  }
  .cloud::before{ width: 56%; height: 92%; left: 10%; top: -42%; }
  .cloud::after { width: 50%; height: 82%; left: 46%; top: -32%; }

  .cloud .bump{
    position: absolute;
    width: 40%;
    height: 70%;
    left: 68%;
    top: -18%;
    border-radius: 999px;
    opacity: 0.90;
    filter: blur(2.0px);
    background: radial-gradient(circle at 35% 35%,
      rgba(255,255,255,0.90) 0%,
      rgba(255,255,255,0.60) 55%,
      rgba(255,255,255,0.0) 80%
    );
  }

  @keyframes cloudMove { to { transform: translateX(170vw); } }
  @keyframes cloudWobble { 0%,100%{ translate:0 0;} 50%{ translate:0 var(--cloud-wobble-amp);} }

  .star{ position: absolute; background: white; border-radius: 50%; animation: twinkle 3s infinite alternate; }
  @keyframes twinkle{ 0%{ opacity: 0.3; } 100%{ opacity: 1; } }

  .moon{
    position: absolute;
    left: calc(80% - 100px);
    top: 80px;
    width: 120px;
    height: 120px;
    background: url("images/moon.png") center/80px 80px no-repeat;
    z-index: 999;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #window-rain{ position:absolute; inset:0; z-index: 2; pointer-events:none; overflow:hidden; }
  .window-drop{
    position:absolute;
    border-radius: 999px;
    overflow: hidden;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.14),
      inset 0 10px 18px rgba(255,255,255,0.06),
      inset 0 -14px 22px rgba(0,0,0,0.12),
      0 10px 20px rgba(0,0,0,0.18);
    opacity: var(--op, 0.55);
    transform: translateZ(0);
    animation: windowDrip var(--dur, 2.6s) linear infinite;
    will-change: transform;
  }
  .window-drop::before{
    content:"";
    position:absolute;
    inset:-18%;
    background-image: var(--bg-current, none);
    background-repeat: no-repeat;
    background-size: 2000px 1000px;
    background-position: var(--bx, 50%) var(--by, 50%);
    transform: scale(1.20) translate(calc(var(--lens-x, 0px) * 1), calc(var(--lens-y, 0px) * 1));
    filter: saturate(1.25) contrast(1.10) brightness(1.12);
  }
  .window-drop::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.00) 45%),
      radial-gradient(circle at 65% 70%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 55%);
    mix-blend-mode: screen;
    opacity: 0.95;
  }
  @keyframes windowDrip{ 0%{ transform: translate3d(0,0,0);} 100%{ transform: translate3d(0, var(--fall, 420px), 0);} }

  .thunder-flash{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-current, none);
    background-position: center center;
    background-size: 2000px 1000px;
    background-repeat: no-repeat;
    filter: brightness(3);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
  }
  .flashit{ animation: flash ease-out 7s infinite; animation-delay: 2s; }
  @keyframes flash{
    from { opacity: 0; }
    92% { opacity: 0; }
    93% { opacity: 0.6; }
    94% { opacity: 0.2; }
    96% { opacity: 1; }
    to   { opacity: 0; }
  }