:root {
  --aqua:#9ad5d8;
  --ink:#555;
  --pale:#f8f8fc;
  --line:#d7d7ed;
  --heading:Poppins,Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}

body {
  margin:0;
  color:var(--ink);
  font:20px/1.5 Roboto,Arial,sans-serif;
}

img {
  max-width:100%;
  height:auto;
}

a {
  color:#387e83;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

h1,h2,h3 {
  font-family:var(--heading);
  font-weight:600;
  line-height:1.1;
  margin:0 0 30px;
  color:var(--aqua);
}

h1 {
  font-size:76px;
}

h2 {
  font-size:48px;
}

h3 {
  font-size:24px;
}

p {
  margin:0 0 24px;
}

.container {
  width:min(1500px,calc(100% - 48px));
  margin-inline:auto;
}

.site-header {
  background:white;
  position:sticky;
  top:0;
  z-index:20;
}

.header-inner {
  max-width:2450px;
  min-height:110px;
  margin:auto;
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}

.brand img {
  display:block;
  width:220px;
}

.site-header nav {
  display:flex;
  gap:40px;
}

.site-header nav a {
  color:#333;
  font-size:16px;
  font-weight:500;
  transition:color 400ms ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color:var(--aqua);
  text-decoration:none;
}

.button {
  border:0;
  display:inline-block;
  background:var(--aqua);
  border-radius:28px;
  color:white;
  font:600 14px/1.1 Roboto,Arial,sans-serif;
  padding:18px 40px;
  box-shadow:0 20px 20px #0002;
  cursor:pointer;
  text-align:center;
}

.button:hover {
  background:#79babf;
  text-decoration:none;
}

.button-dark {
  background:#555;
}

.button-dark:hover {
  background:#333;
}

.menu-toggle {
  display:none;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:60;
  background:white;
  padding:15px;
}

.skip-link:focus {
  top:10px;
}

:focus-visible {
  outline:3px solid #237b82;
  outline-offset:4px;
}

button:disabled {
  opacity:.6;
  cursor:wait;
}

.hero {
  margin-top:0;
  padding:0 0 150px;
  background:#edf3fa url('/assets/weather-change-start.webp') center bottom/100% 100% no-repeat;
}

.hero-grid {
  min-height:90vh;
  display:grid;
  grid-template-columns:59% 41%;
  align-items:center;
  gap:30px;
}

.hero h1 {
  font-size:3.8em;
  letter-spacing:-1.5px;
  color:#387e83;
}

.hero p {
  max-width:780px;
}

.dual-buttons {
  display:flex;
  margin-top:56px;
  position:relative;
  width:360px;
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .dual-buttons,
  .video-poster,
  .header-register,
  .intro .button,
  .informed .button,
  .faq details {
    transition:transform 250ms ease;
  }
  .partner-track a {
    transition:transform 250ms ease,box-shadow 250ms ease;
  }
  .dual-buttons:hover,
  .video-poster:hover,
  .header-register:hover,
  .intro .button:hover,
  .informed .button:hover {
    transform:scale(1.025);
  }
  .partner-track:not(.is-dragging) a:hover {
    transform:scale(1.025);
  }
  .faq details:not([open]):hover {
    transform:scale(1.01);
  }
  .partner-dots button {
    transition:transform 250ms ease;
  }
  .partner-dots button:hover {
    transform:scale(1.05);
  }
}

.dual-buttons .button {
  width:50%;
  padding:24px 26px;
}

.dual-buttons .button:first-child {
  border-radius:28px 0 0 28px;
}

.dual-buttons .button:last-child {
  border-radius:0 28px 28px 0;
}

.dual-buttons:after {
  content:'⇄';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background:white;
  border:5px solid #d5e1e1;
  border-radius:50%;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  line-height:1;
  font-size:18px;
  pointer-events:none;
}

.video-poster {
  position:relative;
  display:block;
  max-width:625px;
  border:1px solid #cbe5e7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 16px #578e8433;
  line-height:0;
  background:white;
}

.video-poster img {
  width:100%;
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
}

.video-poster span {
  position:absolute;
  inset:calc(50% - 45px) auto auto calc(50% - 45px);
  border:5px solid #fffd;
  border-radius:50%;
  width:90px;
  height:90px;
  color:#fff;
  display:grid;
  place-items:center;
  font:56px/1 Arial;
  padding-left:8px; /* Shift the triangle 4px right for optical centering. */
}

.section {
  padding:100px 0;
}

.two-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.intro {
  padding-top:0;
  padding-bottom:120px;
}

.intro-frog {
  width:460px;
  justify-self:center;
}

.weather {
  position:relative;
  background:#f4f5fc url('/assets/weather-conditions.webp') center bottom/cover no-repeat;
  padding:180px 0;
}

.weather::before, .weather::after {
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:clamp(40px,6vw,100px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 34C150 88 280 84 440 34S680 -8 840 56S1190 152 1440 84V120H0Z' fill='white'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  pointer-events:none;
}

.weather::before {
  top:0;
  transform:rotate(180deg);
}

.weather::after {
  bottom:0;
}

.weather-layout {
  display:grid;
  grid-template-columns:25% 75%;
  gap:30px;
}

.bed-frog {
  width:260px;
  position:sticky;
  top:130px;
}

.weather-layout>div:first-child {
  padding:30px 40px;
}

.weather h2 {
  text-align:center;
  margin:0 0 70px;
  color:#387e83;
}

.weather-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 30px;
}

.weather-card {
  position:relative;
  padding:24px 40px 35px;
  background:white;
  border-radius:20px;
  box-shadow:0 30px 75px #d7d7ed66;
  font-size:20px;
  line-height:1.4;
}

.weather-card h3 {
  text-align:center;
  margin:12px 0 24px;
  font-family:Roboto,Arial,sans-serif;
}

.weather-card h3 a {
  color:var(--aqua);
  text-decoration:none;
}

.weather-card h3 a:after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
}

.weather-card:hover {
  box-shadow:0 20px 45px #78999f66;
}

.weather-card:focus-within {
  outline:3px solid #237b82;
}

.weather-card p {
  text-align:justify;
}

.weather-card ul {
  padding-left:0;
  list-style:none;
  margin:12px 0 0;
  font-size:18px;
}

.weather-card li {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.weather-card li .weather-icon {
  font-size:14px;
}

.weather-icon {
  display:block;
  text-align:center;
  color:var(--aqua);
  font-size:50px;
  line-height:1;
}

.informed {
  padding-top:0;
  padding-bottom:175px;
}

.registration {
  padding-top:0;
  padding-bottom:100px;
}

.registration img {
  align-self:center;
}

.registration h2 {
  margin-bottom:50px;
}

.registration-form {
  font-size:14px;
  line-height:1.4;
}

.registration-form label,.consent-title {
  font-weight:600;
  display:block;
  margin-bottom:8px;
}

.name-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

input:not([type=checkbox]),select {
  width:100%;
  font:inherit;
  color:#555;
  background:white;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:20px;
}

input::placeholder {
  color:#999;
}

.required {
  color:#c43d3d;
}

.consent {
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin:0 0 20px;
}

.consent input {
  margin:3px 0 0;
}

.consent label {
  font-size:14px;
  font-weight:400;
  line-height:1.4;
}

.consent a {
  color:var(--aqua);
}

.registration-form .button {
  box-shadow:none;
  padding:18px 40px;
}

.trap {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.field-error {
  display:block;
  color:#a52323;
  margin:-10px 0 18px;
}

.form-error,.success {
  font-size:16px;
  padding:16px 20px;
  border-radius:10px;
  border:1px solid #bb4848;
  background:#fff1f1;
  margin-bottom:24px;
  color:#832121;
}

.success {
  border-color:#74a69b;
  background:#edf8f4;
  color:#21554a;
}

[aria-invalid=true] {
  border-color:#bb4848!important;
}

.faq-section {
  background:var(--pale) url('/assets/original/Artcoin-Bg-overl2.png') center left/cover no-repeat;
  padding-top:330px;
  padding-bottom:0;
  margin-bottom:170px;
}

.faq {
  max-width:1180px;
}

.faq>h2,.faq>div {
  text-align:center;
}

.faq>div {
  margin-bottom:34px;
}

details {
  margin:14px 0;
  border-radius:14px;
  box-shadow:0 6px 15px #0001;
  font-size:18px;
  overflow:hidden;
}

.faq details {
  border:1px solid #e3e5e8;
  box-shadow:0 8px 20px #0000001a;
}

summary {
  cursor:pointer;
  list-style:none;
  padding:20px 30px;
  color:var(--aqua);
  font-size:20px;
  font-weight:500;
  position:relative;
  padding-right:55px;
}

summary::after {
  content:'⌄';
  position:absolute;
  right:24px;
}

.faq summary::-webkit-details-marker {
  display:none;
}

.faq summary::after {
  content:'';
  top:50%;
  width:11px;
  height:11px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-75%) rotate(45deg);
  transition:transform 300ms ease-in-out;
}

.faq details[open]:not(.is-closing)>summary::after {
  transform:translateY(-25%) rotate(225deg);
}

details[open]>summary {
  background:var(--aqua);
  color:white;
}

.faq details.is-closing>summary {
  background:transparent;
  color:var(--aqua);
}

details>div {
  padding:22px 30px;
}

details h4 {
  margin:16px 0 10px;
}

details p:last-child {
  margin-bottom:0;
}

.partners {
  padding:90px 22px 25px;
  background:var(--pale);
  border-radius:16px;
  margin-bottom:170px;
}

.partners h2 {
  text-align:center;
  font-size:36px;
}

.partner-track {
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:15px 0;
  scrollbar-width:none;
}

.partner-track::-webkit-scrollbar {
  display:none;
}

.partner-track.is-looping {
  overflow:hidden;
  scroll-snap-type:none;
  touch-action:pan-y pinch-zoom;
  user-select:none;
  cursor:grab;
}

.partner-track.is-looping a {
  cursor:inherit;
  scroll-snap-align:none;
}

.partner-track.is-dragging {
  cursor:grabbing;
}

.partner-strip {
  display:flex;
  flex:0 0 100%;
  gap:20px;
  min-width:0;
}

.partner-track a:focus-visible {
  outline-offset:-4px;
}

.partner-track a {
  flex:0 0 calc((100% - 60px)/4);
  background:white;
  border-radius:16px;
  box-shadow:0 4px 10px #00000012;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:175px;
  padding:20px;
  scroll-snap-align:start;
}

.partner-track:not(.is-dragging) a:hover {
  box-shadow:0 5px 12px #0000001f;
}

.partner-track img {
  max-height:145px;
  object-fit:contain;
}

.partner-dots {
  text-align:center;
  margin-top:18px;
}

.site-footer {
  background:var(--pale) url('/assets/original/Footer-overly.png') center top/cover no-repeat;
  padding-top:330px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:60px;
  border-block-end:1px solid #e9e9f3;
  padding:100px 0;
}

.footer-frog {
  width:170px;
  justify-self:center;
}

.footer-grid h2 {
  font:600 24px/1.1 Roboto,Arial,sans-serif;
}

.footer-grid ul {
  list-style:none;
  padding-left:0;
  line-height:2.4;
  font-size:14px;
}

.footer-grid a {
  position:relative;
  display:block;
  padding-left:22px;
  color:#243746;
  transition:color 400ms ease;
}

.footer-grid a::before {
  content:'';
  position:absolute;
  left:2px;
  top:calc(1.2em - 4px);
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  color:var(--aqua);
  text-decoration:none;
}

.copyright {
  text-align:center;
  font-size:12px;
  padding:26px;
  color:#555;
}

dialog {
  width:min(1400px,90vw);
  border:0;
  border-radius:12px;
  background:linear-gradient(to top,#000 70px,var(--aqua) 180px);
  padding:45px 12px 12px;
  color:white;
}

dialog::backdrop {
  background:#000b;
}

dialog video {
  display:block;
  width:100%;
  max-height:75vh;
}

.video-close {
  position:absolute;
  right:12px;
  top:5px;
  color:var(--ink);
  border:0;
  background:transparent;
  font:32px/1 Arial;
  cursor:pointer;
}

.content-page {
  padding:100px 0 150px;
  min-height:60vh;
  overflow-wrap:anywhere;
}

.content-page h1 {
  font-size:64px;
}

.content-page h2 {
  font-size:36px;
  line-height:1.3;
  color:#333;
  margin-top:48px;
}

.content-page h3 {
  color:#333;
  line-height:1.3;
}

.imprint-page > h2, .imprint-page > h3,
.privacy-page > h2, .privacy-page > h3 {
  margin:48px 0 12px;
}

.content-page img {
  max-width:350px;
  display:block;
  margin:30px auto;
}

.content-page table {
  font-size:16px;
}

.content-page details h4 {
  font-size:20px;
}

.content-page .cookie-tables {
  overflow:auto;
}

.admin-page {
  padding:60px 30px;
  max-width:1800px;
  margin:auto;
  font-size:16px;
  min-height:65vh;
}

.admin-page h1 {
  font-size:36px;
  color:#367e83;
}

.admin-title {
  display:flex;
  justify-content:space-between;
  gap:30px;
}

.login {
  max-width:540px;
}

.login form {
  display:grid;
}

.login label {
  margin-bottom:8px;
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  padding:20px;
  background:var(--pale);
  border-radius:12px;
}

.filters input,.filters select {
  margin-bottom:0;
}

.filters label {
  display:block;
}

.checkbox-label {
  display:flex;
  gap:8px;
  align-items:center;
}

.export-form {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  align-items:center;
  margin:30px 0;
}

.table-wrap {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  background:white;
}

td,th {
  padding:12px;
  border:1px solid #d7e4e5;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
}

th {
  background:#e6f4f4;
  white-space:nowrap;
}

.withdraw {
  font:inherit;
  color:#823030;
  border:1px solid #b79797;
  padding:6px;
  border-radius:6px;
  background:white;
  cursor:pointer;
}

.duplicate {
  display:block;
  color:#905313;
  margin-bottom:8px;
}

.pagination {
  display:flex;
  gap:30px;
  margin-top:30px;
}

@media(min-width:1025px) and (max-width:1600px) {
  .container {
    width:min(1400px,calc(100% - 48px));
  }
  .site-header nav {
    gap:35px;
  }
  .header-inner {
    max-width:1150px;
    padding-inline:20px;
  }
  .brand img {
    width:200px;
  }
  .hero-grid {
    gap:20px;
  }
  .weather-card {
    padding-inline:28px;
  }
  .hero {
    margin-top:0;
  }
  .two-columns {
    gap:50px;
  }
}

@media(max-width:1024px) {
  body {
    font-size:16px;
  }
  .container {
    width:calc(100% - 40px);
  }
  h1 {
    font-size:44px;
  }
  h2 {
    font-size:30px;
  }
  .header-inner {
    min-height:90px;
    padding:15px 20px;
    gap:20px;
  }
  .brand img {
    width:160px;
  }
  .site-header nav {
    gap:20px;
  }
  .site-header nav a {
    font-size:13px;
  }
  .button {
    padding:14px 30px;
  }
  .hero {
    margin-top:40px;
    padding-bottom:70px;
  }
  .hero h1 {
    font-size:44px;
  }
  .hero-grid {
    grid-template-columns:55% 45%;
    min-height:70vh;
    gap:10px;
  }
  .dual-buttons {
    width:290px;
    margin-top:32px;
  }
  .dual-buttons .button {
    padding:20px;
  }
  .two-columns {
    gap:35px;
  }
  .intro {
    padding:50px 0 65px;
  }
  .intro-frog {
    width:320px;
  }
  .weather {
    padding:120px 0 140px;
  }
  .weather-layout {
    grid-template-columns:20% 80%;
    gap:0;
  }
  .weather-layout>div:first-child {
    padding:30px 10px;
  }
  .weather h2 {
    margin-bottom:35px;
  }
  .weather-cards {
    gap:30px 20px;
  }
  .weather-card {
    font-size:16px;
    padding:20px;
  }
  .weather-card ul {
    font-size:14px;
  }
  .weather-card h3 {
    font-size:20px;
  }
  .weather-icon {
    font-size:40px;
  }
  .informed {
    padding-bottom:100px;
  }
  .registration {
    padding-bottom:60px;
  }
  .registration h2 {
    margin-bottom:30px;
  }
  .faq-section {
    padding-top:80px;
    margin-bottom:80px;
  }
  summary {
    font-size:17px;
  }
  details {
    font-size:16px;
  }
  .partners {
    padding-top:50px;
    margin-bottom:80px;
  }
  .partners h2 {
    font-size:26px;
  }
  .partner-track a {
    min-height:130px;
  }
  .site-footer {
    padding-top:150px;
  }
  .footer-grid {
    padding:60px 0;
    gap:30px;
  }
  .footer-grid h2 {
    font-size:20px;
  }
  .content-page h1 {
    font-size:44px;
  }
  .content-page {
    padding-top:60px;
  }
}

@media(max-width:767px) {
  html {
    scroll-padding-top:90px;
  }
  .header-inner {
    flex-wrap:wrap;
    gap:16px;
    min-height:85px;
  }
  .brand img {
    width:135px;
  }
  .header-register {
    font-size:12px;
    padding:12px 20px;
  }
  .menu-toggle:not([hidden]) {
    display:block;
    margin-left:auto;
    background:none;
    border:0;
    color:#367e83;
    font:500 14px Roboto;
    cursor:pointer;
  }
  .site-header nav {
    display:flex;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    order:4;
  }
  .site-header:has(.menu-toggle:not([hidden])) nav {
    display:none;
  }
  .site-header nav.expanded {
    display:flex!important;
  }
  .site-header nav a {
    padding:10px;
    font-size:14px;
  }
  .hero {
    margin-top:0;
    padding:45px 0 60px;
  }
  .hero-grid {
    display:flex;
    flex-direction:column-reverse;
    min-height:0;
    gap:40px;
    text-align:center;
  }
  .hero h1 {
    font-size:30px;
    letter-spacing:0;
  }
  .hero p {
    font-size:16px;
  }
  .video-poster {
    max-width:277px;
  }
  .video-poster span {
    width:60px;
    height:60px;
    inset:calc(50% - 30px) auto auto calc(50% - 30px);
    font-size:36px;
  }
  .dual-buttons {
    margin:24px auto 0;
    width:240px;
  }
  .dual-buttons .button {
    font-size:12px;
    padding:19px;
  }
  .dual-buttons:after {
    height:38px;
    width:38px;
  }
  .two-columns {
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:30px;
  }
  .intro-frog {
    width:240px;
    order:-1;
  }
  .intro {
    padding:50px 0;
  }
  .weather {
    padding:100px 0;
  }
  .weather-layout {
    display:block;
  }
  .weather-layout>div:first-child {
    display:none;
  }
  h2 {
    font-size:26px;
  }
  .weather h2 {
    margin-bottom:30px;
  }
  .weather-cards {
    grid-template-columns:1fr;
    gap:25px;
  }
  .weather-card {
    padding:25px 28px;
  }
  .weather-card h3 {
    font-size:18px;
  }
  .weather-card p {
    text-align:justify;
  }
  .weather-card ul {
    font-size:14px;
    text-align:left;
  }
  .informed {
    padding:30px 0 50px;
  }
  .informed img {
    order:-1;
  }
  .two-columns>img {
    max-width:400px;
    width:100%;
  }
  .registration {
    padding:0 0 45px;
  }
  .registration img {
    width:100%;
    max-width:350px;
  }
  .registration .two-columns>div {
    width:100%;
    text-align:left;
  }
  .registration h2 {
    text-align:center;
    margin-bottom:25px;
  }
  .registration-form label,.consent-title {
    font-size:14px;
  }
  .name-fields {
    gap:12px;
  }
  .registration-form input,.registration-form select {
    padding:12px;
    border-radius:12px;
  }
  summary {
    padding:16px 20px;
    font-size:15px;
    padding-right:42px;
  }
  summary::after {
    right:18px;
  }
  details>div {
    padding:20px;
  }
  .faq-section {
    padding:60px 0 20px;
    margin-bottom:40px;
  }
  .partners {
    padding:40px 12px 18px;
    margin-bottom:50px;
  }
  .partner-track a {
    flex-basis:100%;
    height:150px;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding:40px 0;
  }
  .footer-frog {
    width:120px;
    grid-column:1/-1;
  }
  .footer-grid h2 {
    font-size:18px;
  }
  .footer-grid ul {
    font-size:12px;
  }
  .site-footer {
    padding-top:100px;
  }
  .copyright {
    font-size:11px;
  }
  .content-page {
    padding:50px 0 70px;
  }
  .content-page h1 {
    font-size:30px;
  }
  .content-page h2 {
    font-size:24px;
  }
  .content-page h3 {
    font-size:22px;
  }
  .admin-page {
    padding:30px 20px;
  }
  .admin-page h1 {
    font-size:26px;
  }
  .filters>div {
    width:100%;
  }
  .admin-title {
    gap:12px;
  }
  .pagination {
    gap:16px;
  }
  .content-page table {
    min-width:700px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .faq summary::after {
    transition:none;
  }
}

.hero-grid {
  grid-template-columns:minmax(0,59fr) minmax(0,41fr);
}

.weather-layout {
  grid-template-columns:minmax(0,25fr) minmax(0,75fr);
}

.site-footer {
  background-image:url("/assets/original/Footer-bg-img.png");
}

@media(max-width:1024px) {
  .hero-grid {
    grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  }
  .weather-layout {
    grid-template-columns:minmax(0,20fr) minmax(0,80fr);
  }
}

.faq-section,.site-footer {
  background-color:white;
}

.partner-dots button {
  width:48px;
  height:48px;
  border:1px solid #c6dadd;
  border-radius:50%;
  background:white;
  color:var(--aqua);
  box-shadow:0 4px 12px #578e8426;
  padding:0;
  margin:0 6px;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  touch-action:manipulation;
}

.partner-dots button:hover {
  background:var(--pale);
  border-color:var(--aqua);
}

@media(max-width:767px) {
  .two-columns>.intro-frog {
    width:240px;
  }
}

.weather-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px;
}
.weather-detail > div:first-child, .weather-detail > ul { grid-column: 1; }
.weather-detail > ul { grid-row: 2; margin-top: 0; }
.weather-detail > img { grid-column: 2; grid-row: 1 / span 2; max-width: 460px; width: 100%; align-self: center; }
.weather-detail > h2, .weather-detail > div:not(:first-child), .weather-detail > details { grid-column: 1 / -1; width: 100%; max-width: 1180px; margin-inline: auto; }
.weather-detail > h2 { text-align: center; margin-top: 130px; }
.weather-detail > div:not(:first-child) { text-align: center; }

.weather-intro {
  background:#eeeef6;
  padding-top:140px;
}

.weather-intro-winter {
  background-image:url('/assets/winter.webp');
}

.weather-intro-summer {
  background-color:#fdf8ec;
  background-image:url('/assets/summer.webp');
}

.weather-intro-cold {
  background-color:#d5e6ee;
  background-image:url('/assets/cold.webp');
}

.weather-intro-change {
  background-color:#dae9f1;
  background-image:url('/assets/weather-change.webp');
}

.weather-intro-winter, .weather-intro-summer, .weather-intro-cold, .weather-intro-change {
  background-position:center bottom;
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.weather-intro-winter .weather-wave, .weather-intro-summer .weather-wave, .weather-intro-change .weather-wave {
  visibility:hidden;
}

@media (min-width:1600px) {
  .weather-intro {
    padding-top:clamp(180px,8vw,240px);
  }
}

.weather-intro-grid {
  max-width:1300px;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  grid-template-rows:auto 1fr;
  column-gap:100px;
  padding-bottom:65px;
}

.weather-intro h1 {
  font-size:clamp(30px,4vw,56px);
  color:#387e83;
}

.weather-intro-grid > img {
  display:block;
  max-width:340px;
  margin:0 auto;
}

.weather-intro-grid > ul {
  margin-bottom:0;
  padding-left:0;
  list-style:none;
}

.weather-intro-grid > ul > li {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.weather-intro-grid li .weather-icon {
  font-size:14px;
  margin-top:0.5em;
}

.weather-wave {
  display:block;
  width:100%;
  height:clamp(65px,8vw,150px);
}

.weather-faq {
  max-width:1180px;
  padding-top:30px;
}

.weather-faq > h2, .weather-faq > div {
  text-align:center;
}

.weather-faq > h2 {
  margin-top:0;
}

@media (max-width: 767px) {
  .weather-detail { display: block; }
  .weather-detail > h2 { margin-top: 60px; }
  .weather-detail > img { max-width: 240px; }
  .weather-intro { padding-top:75px; }
  .weather-intro-grid { padding-bottom:20px; }
  .weather-intro-grid > img { margin:35px auto 0; }
  .weather-faq { padding-top:25px; }
}

@media (max-width:1440px) {
  .hero, .weather,
  .weather-intro-winter, .weather-intro-summer, .weather-intro-cold, .weather-intro-change {
    background-size:cover;
    background-position:left top;
  }
}