/* =============================================================================
   UGG Address Checker – Design System v2.1
   Added: .ugg-isp-section, skeleton cards, confirmed banner, empty state
   ============================================================================= */

:root {
  --ds-green:          #41B991;
  --ds-green-light:    #AAD9C2;
  --ds-green-xlight:   #e8f6f173;
  --ds-coral:          #855C3D;
  --ds-mustard:        #FFB11B;
  --ds-mustard-light:  #FFE8BB;
  --ds-mustard-border: rgba(255,177,27,0.45);
  --ds-black:          #1B1B1B;
  --ds-gray-700:       #707070;
  --ds-gray-600:       #8A8A8A;
  --ds-gray-400:       #DFECE1;
  --ds-gray-200:       #E9E9E9;
  --ds-gray-100:       #F7F7F7;
  --ds-white:          #FFFFFF;
  --ds-radius:         10px;
  --ds-radius-sm:      6px;
  --ds-radius-xs:      4px;
  --ds-radius-pill:    999px;
  --ds-border:         1.5px solid var(--ds-gray-200);
  --ds-border-active:  1.5px solid var(--ds-black);
  --ds-border-green:   1.5px solid var(--ds-green);
  --ds-border-mustard: 1.5px solid var(--ds-mustard);
  --ds-font:           'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-fw-regular:     400;
  --ds-fw-semi:        600;
  --ds-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ds-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur:            180ms;
  --ugg-display-radius: 30px;
  --ugg-display-pad-y:  26px;
  --ugg-display-pad-x:  28px;
  --ugg-display-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

.ugg-checker {
  --ds-green:          #41B991;
  --ds-green-light:    #AAD9C2;
  --ds-green-xlight:   #E8F6F1;
  --ds-coral:          #855C3D;
  --ds-mustard:        #FFB11B;
  --ds-mustard-light:  #FFE8BB;
  --ds-mustard-border: rgba(255,177,27,0.45);
  --ds-black:          #1B1B1B;
  --ds-gray-700:       #707070;
  --ds-gray-600:       #8A8A8A;
  --ds-gray-400:       #DFECE1;
  --ds-gray-200:       #E9E9E9;
  --ds-gray-100:       #F7F7F7;
  --ds-white:          #FFFFFF;
  --ds-radius:         10px;
  --ds-radius-sm:      6px;
  --ds-radius-xs:      4px;
  --ds-radius-pill:    999px;
  --ds-border:         1.5px solid var(--ds-gray-200);
  --ds-border-active:  1.5px solid var(--ds-black);
  --ds-border-green:   1.5px solid var(--ds-green);
  --ds-border-mustard: 1.5px solid var(--ds-mustard);
  --ds-font:           'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-fw-regular:     400;
  --ds-fw-semi:        600;
  --ds-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ds-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur:            180ms;
  --ugg-display-radius: 30px;
  --ugg-display-pad-y:  26px;
  --ugg-display-pad-x:  28px;
  --ugg-display-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base Container ──────────────────────────────────────────────────────── */
.ugg-checker {
  background:    var(--ds-white);
  border-radius: 32px;
  border:        var(--ds-border);
  padding:       28px 32px 24px 32px;
  max-width:     100%;
  box-sizing:    border-box;
}

/* Section heading above the form (not inside grid — avoids row overlap with PLZ/Ort) */
.ugg-checker__form-heading {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-gray-200);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Eigene Grid-Zeile unter PLZ, damit „Ort“ in Zeile 1 nur mit PLZ-Eingabe aligniert */
.ugg-checker__plz-hint {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: clamp(270px, 58vw, 640px);
  max-width: none;
}

/* PLZ-Breite nur in der PLZ+Ort-Zeile (Flex), nicht global vergrößern */
.ugg-checker__plz-ort-row {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ugg-checker__plz-ort-row .ugg-checker__field-group--plz {
  flex: 0 0 auto;
  width: 270px;
  max-width: 270px;
}

.ugg-checker__plz-ort-row .ugg-checker__field-group--ort {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.ugg-checker__plz-ort-row .ugg-checker__field-group--ort .ugg-autocomplete,
.ugg-checker__plz-ort-row .ugg-checker__field-group--ort .ugg-autocomplete__wrap,
.ugg-checker__plz-ort-row .ugg-checker__field-group--ort .ugg-autocomplete__input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.ugg-checker__field-group--plz .ugg-otp {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.ugg-checker__intro-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  margin-left: 100px;
  pointer-events: none;
}

.ugg-checker__intro-arrow-text {
  margin: 0;
  font-weight: var(--ds-fw-semi);
  color: #1b1b1b;
  font-size: 14px;
  line-height: 1.35;
}

.ugg-checker__plz-hint--hidden {
  display: none !important;
}

.ugg-checker__intro-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--ds-fw-semi);
  color: var(--ds-black);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.ugg-checker__intro-text {
  margin: 0;
  color: var(--ds-gray-700);
  font-size: 14px;
  line-height: 1.4;
}

.ugg-checker__intro-arrow-img {
  width: 32px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* ── Form Grid (2 Zeilen) ────────────────────────────────────────────────── */
/*
   Zeile 1: .ugg-checker__plz-ort-row (Flex: PLZ fix 270px | Ort flex-grow)
   Zeile 2: Pfeil-Hinweis (col 1)
   Zeile 3: Straße (col 1–2) | Hausnummer (col 3)
*/
.ugg-checker__form {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 220px);
  column-gap:            14px;
  row-gap:               14px;
  align-items:           start;
}

.ugg-checker__field-group--strasse { grid-column: 1 / 3; grid-row: 3; }
.ugg-checker__field-group--nr      { grid-column: 3;     grid-row: 3; }

@media (max-width: 680px) {
  .ugg-checker__form { grid-template-columns: 1fr 1fr; }
  /* Wrapper auflösen: PLZ / Ort wieder direkte Grid-Kinder */
  .ugg-checker__plz-ort-row {
    display: contents;
  }
  .ugg-checker__plz-ort-row .ugg-checker__field-group--plz {
    flex: none;
    width: auto;
    max-width: none;
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: stretch;
  }
  .ugg-checker__plz-ort-row .ugg-checker__field-group--ort {
    flex: none;
    width: 100%;
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .ugg-checker__plz-hint             { grid-column: 1 / 3; grid-row: 2; width: 100%; max-width: none; }
  .ugg-checker__field-group--strasse { grid-column: 1;     grid-row: 4; }
  .ugg-checker__field-group--nr      { grid-column: 2;     grid-row: 4; }
  .ugg-checker__field-group--plz .ugg-otp { width: 100%; }
  .ugg-checker__field-group--ort     { margin-top: 0; }
  .ugg-checker__intro-arrow          { margin-left: 0; }
}

@media (max-width: 420px) {
  .ugg-checker__form { grid-template-columns: 1fr; }
  .ugg-checker__plz-ort-row          { display: contents; }
  .ugg-checker__plz-ort-row .ugg-checker__field-group--plz,
  .ugg-checker__plz-ort-row .ugg-checker__field-group--ort,
  .ugg-checker__field-group--strasse,
  .ugg-checker__field-group--nr,
  .ugg-checker__plz-hint             { grid-column: 1; grid-row: auto; }
}

/* ── Field Groups ────────────────────────────────────────────────────────── */
.ugg-checker__field-group {
  display:        flex;
  flex-direction: column !important;
  gap:            4px;
  min-width:      0;
}

.ugg-checker__field-group--plz     { position: relative; }
.ugg-checker__field-group--ort,
.ugg-checker__field-group--strasse,
.ugg-checker__field-group--nr,
.ugg-checker__field-group--suffix  { width: 100%; }
.ugg-checker__field-group--hidden  { display: none !important; }

/* Suffix field: only revealed when multiple suffixes exist (JS adds/removes --hidden) */
.ugg-checker__field-group--suffix.ugg-checker__field-group--hidden { display: none !important; }

.ugg-checker__field-group--disabled .ugg-autocomplete__wrap {
  opacity:        0.4;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
.ugg-checker__label-row { display: flex; align-items: center; gap: 5px; }

.ugg-checker__label {
  font-weight:    var(--ds-fw-semi);
  color:          var(--ds-gray-700);
  font-size:      12px;
  display:        block;
  user-select:    none;
}

/* =============================================================================
   OTP – PLZ input
   ============================================================================= */

.ugg-otp {
  display:       flex;
  align-items:   center;
  background:    var(--ds-white);
  border:        var(--ds-border);
  border-radius: var(--ds-radius-pill);
  height:        52px;
  padding:       0 18px 0 12px;
  transition:    border-color var(--ds-dur) var(--ds-ease);
  min-width:     240px;
  max-width:     380px;
  box-sizing:    border-box;
}

.ugg-otp:focus-within { border: var(--ds-border-active); }
.ugg-otp--found       { border: var(--ds-border-green); }
.ugg-otp--error       { border: var(--ds-border); animation: ds-shake 0.45s ease; }

.ugg-otp__icon-wrap {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 6px;
  transition: all var(--ds-dur) var(--ds-ease);
}

.ugg-otp--idle .ugg-otp__icon-wrap::before {
  content: '';
  display: block; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2C8.24 2 6 4.24 6 7c0 4.12 5 11 5 11s5-6.88 5-11c0-2.76-2.24-5-5-5zm0 6.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z' fill='%238A8A8A'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ugg-otp--loading .ugg-otp__icon-wrap::before {
  content: ''; display: block; width: 20px; height: 20px;
  border: 2px solid var(--ds-gray-200); border-top-color: var(--ds-green);
  border-radius: 50%; animation: ds-spin 0.6s linear infinite;
}

.ugg-otp--found .ugg-otp__icon-wrap::before {
  content: ''; display: block; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2341B991'/%3E%3Cpath d='M6.5 12.5L10 16L17.5 8.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: ds-pop 0.3s var(--ds-spring);
}

.ugg-otp--error .ugg-otp__icon-wrap::before {
  content: ''; display: block; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%238A8A8A' stroke-width='1.8'/%3E%3Cpath d='M5 17L17 5' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ugg-otp__fields { display: flex; align-items: stretch; }

.ugg-otp__digit {
  width: 38px; height: 100%; line-height: 52px;
  text-align: center;
  font-weight: var(--ds-fw-semi); font-family: var(--ds-font);
  background: transparent; border: none;
  border-right: 1.5px solid var(--ds-gray-200);
  border-radius: 0; color: var(--ds-gray-200);
  outline: none; padding: 0;
  transition: color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;
  box-sizing: border-box;
}
.ugg-otp__digit::-webkit-outer-spin-button,
.ugg-otp__digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ugg-otp__fields .ugg-otp__digit:last-of-type { border-right: none; }
.ugg-otp__digit--current  { color: var(--ds-gray-400); }
.ugg-otp__digit:focus     { color: var(--ds-black); }
.ugg-otp__digit--filled   { color: var(--ds-black); border-color: var(--ds-gray-200); }
.ugg-otp--found .ugg-otp__digit--filled { color: var(--ds-black); border-color: var(--ds-gray-200); }
.ugg-otp--error .ugg-otp__digit { color: var(--ds-black); }
.ugg-otp--error .ugg-otp__digit--inactive { color: var(--ds-gray-200); }

.ugg-checker__plz-status { min-height: 1em; display: none !important; }

/* =============================================================================
   Autocomplete
   ============================================================================= */

.ugg-autocomplete { position: relative; width: 100%; }
.ugg-autocomplete__wrap { position: relative; display: flex; align-items: center; }

.ugg-autocomplete--loading .ugg-autocomplete__wrap::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border: 2px solid var(--ds-gray-200); border-top-color: var(--ds-green);
  border-radius: 50%; animation: ds-spin-center 0.6s linear infinite;
  pointer-events: none; z-index: 2;
}
.ugg-autocomplete--loading .ugg-autocomplete__input { padding-left: 44px; }
.ugg-autocomplete--loading .ugg-autocomplete__chevron,
.ugg-autocomplete--loading .ugg-autocomplete__spinner { opacity: 0; }

.ugg-autocomplete__input {
  width: 100%; height: 52px; padding: 0 40px 0 18px;
  font-family: var(--ds-font); font-weight: var(--ds-fw-regular);
  color: var(--ds-black); background: var(--ds-gray-100);
  border: var(--ds-border); border-radius: var(--ds-radius-pill);
  outline: none;
  transition: border-color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
  cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.ugg-autocomplete__input::placeholder { color: var(--ds-gray-600); }
.ugg-autocomplete__input:not(:disabled) { background: var(--ds-white); cursor: text; }
.ugg-autocomplete__input:not(:disabled):focus,
.ugg-autocomplete--open .ugg-autocomplete__input:not(:disabled) { border: var(--ds-border-active); }
.ugg-autocomplete--open .ugg-autocomplete__input:not(:disabled) {
  border: 2px solid var(--ds-black); border-bottom: none;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: 32px; border-top-right-radius: 32px; z-index: 5;
}
.ugg-autocomplete--has-options .ugg-autocomplete__input:not(:disabled) { border: 2px solid var(--ds-black); }

.ugg-autocomplete__chevron {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238A8A8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s var(--ds-ease), opacity var(--ds-dur);
}
.ugg-autocomplete--open .ugg-autocomplete__chevron { transform: translateY(-50%) rotate(180deg); }
.ugg-autocomplete__chevron--hidden { opacity: 0; }

.ugg-autocomplete__spinner {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid var(--ds-gray-200); border-top-color: var(--ds-green);
  border-radius: 50%; opacity: 0; pointer-events: none;
  animation: ds-spin 0.6s linear infinite; transition: opacity var(--ds-dur);
}
.ugg-autocomplete__spinner--visible { opacity: 1; }

.ugg-autocomplete__list {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--ds-white);
  border-left: 2px solid var(--ds-black); border-right: 2px solid var(--ds-black);
  border-bottom: 2px solid var(--ds-black); border-top: none;
  border-radius: 0 0 32px 32px;
  max-height: 380px; overflow-y: auto; z-index: 1000;
  list-style: none; margin: 0; padding: 12px 0 10px;
  scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent;
}
.ugg-autocomplete__list::before {
  content: ""; display: block; height: 1px;
  background: #ececec; margin: 8px 18px; border-radius: 2px;
}
.ugg-autocomplete__list--open { display: block; animation: ds-dropdown-in 0.14s var(--ds-ease); }
.ugg-autocomplete__list::-webkit-scrollbar      { width: 5px; }
.ugg-autocomplete__list::-webkit-scrollbar-track { background: transparent; }
.ugg-autocomplete__list::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 4px; }

.ugg-autocomplete__item {
  display: grid; grid-template-columns: minmax(84px, auto) 1fr;
  align-items: baseline; gap: 14px;
  padding: 14px 48px 14px 18px;
  font-family: var(--ds-font); font-weight: var(--ds-fw-regular);
  cursor: pointer; color: var(--ds-black);
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  position: relative;
  transition: background 0.1s, color 0.1s;
}
.ugg-autocomplete__item::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px; background: #ececec;
}
.ugg-autocomplete__item--empty::after,
.ugg-autocomplete__item:last-child::after { display: none; }
.ugg-autocomplete__item:hover,
.ugg-autocomplete__item--active { background: #f7f7f7; color: var(--ds-black); }
.ugg-autocomplete__item--active mark { background: transparent; color: var(--ds-black); }
.ugg-autocomplete__item--empty {
  color: var(--ds-gray-600); cursor: default; display: flex; align-items: center; gap: 7px;
}
.ugg-autocomplete__item--empty::before {
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%238A8A8A' stroke-width='1.3'/%3E%3Cpath d='M7 4.5v3' stroke='%238A8A8A' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10' r='0.7' fill='%238A8A8A'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ugg-autocomplete__item mark { background: transparent; color: var(--ds-green); font-weight: var(--ds-fw-semi); }
.ugg-optcode  { color: var(--ds-gray-600); font-weight: var(--ds-fw-regular); }
.ugg-optlabel { color: var(--ds-black); font-weight: var(--ds-fw-regular); }
.ugg-optlabel--single { grid-column: 1 / -1; }

/* =============================================================================
   ISP Section – the main new component
   ============================================================================= */

.ugg-isp-section {
  margin-top: 52px;
}

/* ── Outer wrap: Prüfungs-Karte + ISP-Bereich darunter ───────────────────── */
/* PLZ-only: hide street-level fields */
.ugg-checker--mode-plz .ugg-checker__field-group--address-only,
.ugg-checker--mode-plz .ugg-checker__plz-hint {
	display: none !important;
}

.ugg-vc-backend-error {
	padding: 1rem 1.25rem;
	border: 1px solid #e55c3d;
	border-radius: var(--ds-radius, 10px);
	background: #fff5f3;
	color: var(--ds-black, #1b1b1b);
	font-family: var(--ds-font);
}

.ugg-isp-section__hint {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ds-gray-700, #707070);
}

.ugg-address-checker-wrap,
.ugg-verfuegbarkeitscheck-wrap {
  max-width: 100%;
}

.ugg-checker__progress {
  margin-top: 20px;
}

/* ── Head: intro text + hint ─────────────────────────────────────────────── */
.ugg-isp-section__browse {
  margin-bottom: 16px;
}

.ugg-isp-section__browse[hidden] {
  display: none !important;
}

.ugg-isp-section__title {
  margin:      0 0 12px;
  font-family: var(--ds-font);
  font-size:   clamp(22px, 4vw, 28px);
  font-weight: var(--ds-fw-semi);
  line-height: 1.25;
  color:       var(--ds-black);
}

.ugg-isp-section__title .highlight {
  color: var(--ds-green);
}

.ugg-isp-section__lede {
  margin:      0 0 20px;
  max-width:   640px;
  font-size:   16px;
  line-height: 1.5;
  font-weight: var(--ds-fw-regular);
  color:       var(--ds-gray-700);
}

.ugg-isp-section__result-title {
  margin:      0 0 16px;
  font-family: var(--ds-font);
  font-size:   clamp(20px, 3.5vw, 26px);
  font-weight: var(--ds-fw-semi);
  line-height: 1.3;
  color:       var(--ds-black);
}

.ugg-isp-section__result-title[hidden] {
  display: none !important;
}

.ugg-isp-section__hint {
  margin:     0;
  transition: opacity 0.3s;
}

/* ── Benefit Cards (über den Anbieter-Karten) ────────────────────────────── */
.ugg-benefit-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  margin-top:            24px;
}

.ugg-benefit-card {
  background:    var(--ds-white);
  border:        var(--ds-border);
  border-radius: var(--ugg-display-radius);
  padding:       26px 24px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.04);
}

/* Platzhalter für das SVG-Icon – Größe wird durch das SVG selbst gesetzt */
.ugg-benefit-card__icon {
  display:    block;
  width:      48px;
  height:     48px;
  flex-shrink: 0;
}

/* Titel und Text: keine eigenen Farb-/Größen-Stile – kommt vom Theme */
.ugg-benefit-card__title { margin: 0; }
.ugg-benefit-card__text  { margin: 0; }

.ugg-benefit-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 22px;
}

.ugg-benefit-card--compact {
  position: relative;
  padding: 20px 18px 16px;
  border-radius: var(--ugg-display-radius);
  min-height: 176px;
  overflow: visible;
  box-shadow: none;
  border: 1px solid var(--bricks-color-kryeza, #1b1b1b);
}

.ugg-benefit-card__icon-wrap {
  position: absolute;
  top: 0;
  left: 14px;
  width: 56px;
  height: 56px;
  transform: translateY(-44%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ugg-benefit-card--compact .ugg-benefit-card__icon {
  width: 64px;
  height: auto;
}

.ugg-benefit-card--compact .ugg-benefit-card__title {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.25;
}

.ugg-benefit-card--compact .ugg-benefit-card__text {
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .ugg-benefit-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ugg-benefit-grid { grid-template-columns: 1fr; }
  .ugg-benefit-grid--compact { grid-template-columns: 1fr; }
  .ugg-benefit-card--compact {
    padding: 18px 14px 14px;
    min-height: auto;
  }
}

/* ── Confirmed address banner ────────────────────────────────────────────── */
.ugg-isp-section__confirmed {
  display:       flex;
  align-items:   center;
  gap:           12px;
  background:    #e8f6f1;
  border:        var(--ds-border-green);
  border-radius: var(--ugg-display-radius);
  padding:       18px 26px;
  margin-bottom: 18px;
  animation:     ugg-display-reveal 0.52s var(--ugg-display-ease) both;
}

.ugg-isp-section__confirmed--unavailable {
  background: var(--ds-mustard-light);
  border:     var(--ds-border-mustard);
}

.ugg-isp-section__confirmed-text {
  font-size:   14px;
  color:       var(--ds-black);
  font-family: var(--ds-font);
}

/* ── Address type badge (Einfamilienhaus / Mehrfamilienhaus) ─────────────── */
.ugg-address-type-badge {
  display:        inline-block;
  background:     var(--ds-gray-100);
  border:         var(--ds-border);
  border-radius:  var(--ds-radius-pill);
  padding:        2px 10px;
  font-size:      11px;
  font-weight:    var(--ds-fw-semi);
  color:          var(--ds-gray-700);
  margin-right:   6px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* ── Progress bar (unter dem Formular in der Prüfungs-Karte) ─────────────── */
.ugg-isp-section__progress {
  margin-bottom: 0;
}

/* ── ISP grid ────────────────────────────────────────────────────────────── */
.ugg-isp-container { position: relative; }
.ugg-isp-slider    { position: relative; }
.ugg-isp-container { padding-bottom: 50px; }

/* Während Adressprüfung: Karten bleiben sichtbar, leicht abgedunkelt */
.ugg-isp-container--checking::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  z-index: 5;
  border-radius: var(--ugg-display-radius);
  transition: opacity 0.35s var(--ugg-display-ease);
}

.ugg-isp-container--checking .ugg-isp-list {
  position: relative;
  z-index: 1;
}

.ugg-isp-list {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:            16px; /* mehr Abstand zwischen den Spalten */
  row-gap:               6px;  /* weniger Abstand zwischen den Reihen */
  padding:               6px 0;
  align-items:           start;
}

/* Card: fixed height, image fills */
.ugg-isp-card {
  --ugg-card-offset: 0px;

  width:       100%;
  height:      350px;
  max-height:  350px;
  background:  transparent;
  border-radius: 12px;
  overflow:    hidden;
  box-shadow:  none;
  position:    relative;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0;
  box-sizing:  border-box;
  opacity:     0;
  transform:   translateY(var(--ugg-card-offset));
  animation:   ugg-isp-fade-in 360ms cubic-bezier(.2,.9,.2,1) forwards;
  will-change: transform, opacity;
}

/* Kein erneutes Fade-In wenn dieselbe Gesamtliste wieder eingefügt wird */
.ugg-isp-card.ugg-isp-card--instant,
.ugg-isp-list > .isp-card.ugg-isp-card--instant {
  animation: none !important;
  opacity:   1 !important;
  transform: translateY(var(--ugg-card-offset)) !important;
}

/* Staggered start positions for a more dynamic masonry-like layout */
.ugg-isp-list .ugg-isp-card:nth-child(4n+1) { --ugg-card-offset: 0px; }
.ugg-isp-list .ugg-isp-card:nth-child(4n+2) { --ugg-card-offset: 40px; }
.ugg-isp-list .ugg-isp-card:nth-child(4n+3) { --ugg-card-offset: 20px; }
.ugg-isp-list .ugg-isp-card:nth-child(4n+4) { --ugg-card-offset: 56px; }

.ugg-isp-card__img {
  width: auto; height: 100%; object-fit: contain;
  display: block; margin: 0 auto; max-width: 100%;
}

.ugg-isp-card a {
  display: block; width: 100%; height: 100%;
  text-decoration: none; color: inherit; position: relative;
}

/* Staggered fade-in */
.ugg-isp-list .ugg-isp-card:nth-child(1) { animation-delay:   0ms; }
.ugg-isp-list .ugg-isp-card:nth-child(2) { animation-delay:  80ms; }
.ugg-isp-list .ugg-isp-card:nth-child(3) { animation-delay: 160ms; }
.ugg-isp-list .ugg-isp-card:nth-child(4) { animation-delay: 240ms; }
.ugg-isp-list .ugg-isp-card:nth-child(5) { animation-delay: 320ms; }
.ugg-isp-list .ugg-isp-card:nth-child(6) { animation-delay: 400ms; }
.ugg-isp-list .ugg-isp-card:nth-child(7) { animation-delay: 480ms; }
.ugg-isp-list .ugg-isp-card:nth-child(8) { animation-delay: 560ms; }

@keyframes ugg-isp-fade-in {
  from { opacity: 0; transform: translateY(calc(8px + var(--ugg-card-offset))); }
  to   { opacity: 1; transform: translateY(var(--ugg-card-offset)); }
}

.ugg-isp-card__title {
  position:   absolute; left: 18px; bottom: 12px; margin: 0;
  color:      var(--ds-black); font-weight: var(--ds-fw-semi); font-size: 16px;
  background: rgba(255,255,255,0.85);
  padding: 6px 10px; border-radius: 12px;
}

/* ── Skeleton cards (loading state) ─────────────────────────────────────── */
.ugg-isp-card--skeleton {
  opacity:    1 !important;
  transform:  none !important;
  animation:  ugg-skeleton-pulse 1.4s ease-in-out infinite !important;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
}

@keyframes ugg-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty / unavailable state ───────────────────────────────────────────── */
.ugg-isp-empty {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     44px var(--ugg-display-pad-x);
  color:       var(--ds-gray-600);
  font-size:   15px;
  line-height: 1.65;
  background:  transparent;
  border:      1px solid rgba(27, 27, 27, 0.1);
  border-radius: var(--ugg-display-radius);
  animation:   ugg-display-reveal 0.52s var(--ugg-display-ease) both;
}

.ugg-isp-empty__icon {
  display:     block;
  font-size:   32px;
  margin-bottom: 12px;
}

/* Adressprüfung: kein Glasfaser */
.ugg-isp-empty--no-glasfaser {
  background:   transparent;
  border:       1px solid rgba(27, 27, 27, 0.1);
  padding:      40px var(--ugg-display-pad-x);
  max-width:    560px;
  margin-left:  auto;
  margin-right: auto;
  border-radius: var(--ugg-display-radius);
}

.ugg-isp-empty--no-glasfaser .ugg-isp-empty__icon {
  font-size:      26px;
  width:          52px;
  height:         52px;
  line-height:    52px;
  margin-left:    auto;
  margin-right:   auto;
  border-radius:  50%;
  background:     rgba(229, 92, 61, 0.12);
  color:          var(--ds-black, #1b1b1b);
  margin-bottom:  16px;
}

.ugg-isp-empty__title {
  margin:      0 0 10px;
  font-size:   18px;
  font-weight: var(--ds-fw-semi, 600);
  color:       var(--ds-black, #1b1b1b);
}

.ugg-isp-empty--no-glasfaser .ugg-isp-empty__text {
  margin:    0;
  font-size: 15px;
  color:     var(--ds-gray-600);
}

/* ── Prev/Next slider buttons ────────────────────────────────────────────── */
.ugg-isp-prev, .ugg-isp-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--ds-white); box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 20;
}
.ugg-isp-prev { left: 6px; }
.ugg-isp-next { right: 6px; }
.ugg-isp-prev[disabled], .ugg-isp-next[disabled] { opacity: 0.35; pointer-events: none; }

/* Mobile */
.ugg-isp-mobile { display: none; }
.ugg-isp-mobile__img { width: 100%; height: auto; display: block; object-fit: contain; }

@media (max-width: 680px) {
  .ugg-isp-list {
    grid-template-columns: repeat(2, 1fr);
    display: grid !important; /* override any flex fallback */
  }
  .ugg-isp-card { height: 160px; }
  .ugg-isp-card--skeleton { height: 160px; }
}

/* =============================================================================
   Progress bar (shared)
   ============================================================================= */

.ugg-result-progress {
  background:    transparent;
  border:        1px solid rgba(27, 27, 27, 0.1);
  border-radius: var(--ugg-display-radius);
  padding:       var(--ugg-display-pad-y) var(--ugg-display-pad-x);
  animation:     ugg-display-reveal 0.52s var(--ugg-display-ease) both;
  box-shadow:    0 4px 28px rgba(27, 27, 27, 0.06);
}

.ugg-result-progress__label {
  font-family: var(--ds-font);
  font-weight: var(--ds-fw-semi);
  color:       var(--ds-black);
  margin-bottom: 14px;
  display:     flex;
  align-items: center;
  gap:         10px;
  letter-spacing: -0.02em;
}

.ugg-result-progress__track {
  height: 6px;
  background: rgba(27, 27, 27, 0.08);
  border-radius: var(--ds-radius-pill);
  overflow: hidden;
}

.ugg-result-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-green) 0%, #5ed4ae 100%);
  border-radius: var(--ds-radius-pill);
  width: 0%;
  transition: width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

/* =============================================================================
   Freiheits-Panel (Social Proof section)
   ============================================================================= */

.ugg-freedom-section {
  margin-top: 48px;
  padding:    40px 0 0;
  border-top: var(--ds-border);
}

/* ── Headline ────────────────────────────────────────────────────────────── */
.ugg-freedom-section__headline {
  text-align:    center;
  margin-bottom: 36px;
}

.ugg-freedom-section__title {
  margin: 0 0 10px;
}

.ugg-freedom-section__sub {
  margin:       0 auto;
  max-width:    600px;
}

/* ── Comparison boxes ────────────────────────────────────────────────────── */
.ugg-freedom-comparison {
  display:        flex;
  align-items:    stretch;
  gap:            0;
  border-radius:  var(--ugg-display-radius);
  overflow:       hidden;
  box-shadow:     0 6px 32px rgba(0,0,0,0.06);
  margin-bottom:  32px;
}

.ugg-freedom-comparison__box {
  flex:        1 1 0;
  padding:     36px 30px;
  display:     flex;
  flex-direction: column;
  gap:         12px;
}

.ugg-freedom-comparison__box--old {
  background:  #f9f9f9;
  border-right: 0;
}

.ugg-freedom-comparison__box--new {
  background:  #f0faf6;
}

.ugg-freedom-comparison__icon {
  width:  44px;
  height: 44px;
  margin-bottom: 4px;
}

.ugg-freedom-comparison__label {
  margin: 0;
}

.ugg-freedom-comparison__model-desc {
  margin: 0;
}

.ugg-freedom-comparison__feeling {
  margin:        0;
  margin-top:    auto;
  padding:       5px 14px;
  border-radius: var(--ds-radius-pill);
  display:       inline-block;
  align-self:    flex-start;
}

.ugg-freedom-comparison__feeling--old {
  background: rgba(150,150,150,0.12);
}

.ugg-freedom-comparison__feeling--new {
  background: rgba(65,185,145,0.15);
}

.ugg-freedom-comparison__divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  flex-shrink:     0;
  background:      var(--ds-white);
  position:        relative;
}

.ugg-freedom-comparison__divider span {
  font-size:   11px;
  font-weight: var(--ds-fw-semi);
  color:       var(--ds-gray-600);
  letter-spacing: 0.05em;
  background:  var(--ds-white);
  padding:     4px 2px;
  position:    relative;
  z-index:     1;
}

.ugg-freedom-comparison__divider::before,
.ugg-freedom-comparison__divider::after {
  content:    '';
  position:   absolute;
  left:       50%;
  transform:  translateX(-50%);
  width:      1px;
  background: var(--ds-gray-200);
}

.ugg-freedom-comparison__divider::before { top: 0; bottom: 50%; }
.ugg-freedom-comparison__divider::after  { top: 50%; bottom: 0; }

/* ── Bottom copy ─────────────────────────────────────────────────────────── */
.ugg-freedom-section__copy {
  text-align: center;
  max-width:  560px;
  margin:     0 auto;
}

@media (max-width: 600px) {
  .ugg-freedom-comparison {
    flex-direction: column;
  }
  .ugg-freedom-comparison__divider {
    width:      100%;
    height:     40px;
    writing-mode: initial;
  }
  .ugg-freedom-comparison__divider::before { left: 0; right: 50%; bottom: 50%; top: 50%; transform: none; width: auto; height: 1px; }
  .ugg-freedom-comparison__divider::after  { left: 50%; right: 0; bottom: 50%; top: 50%; transform: none; width: auto; height: 1px; }
}

/* =============================================================================
   Result card (legacy – kept for fallback)
   ============================================================================= */

.ugg-checker__result { margin-top: 20px; }

.ugg-result-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--ugg-display-radius);
  padding: 18px 26px 16px;
  animation: ugg-display-reveal 0.52s var(--ugg-display-ease) both;
  position: relative;
  overflow: hidden;
}

.ugg-result-card--available {
  background: #e8f6f173;
  border:     var(--ds-border-green);
}

.ugg-result-card--unavailable {
  background: var(--ds-mustard-light);
  border:     var(--ds-border-mustard);
}

.ugg-result-card__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--ds-fw-semi);
}
.ugg-result-card--available   .ugg-result-card__icon { background: var(--ds-green);   color: var(--ds-white); }
.ugg-result-card--unavailable .ugg-result-card__icon { background: var(--ds-mustard); color: var(--ds-white); }

.ugg-result-card__body  { flex: 1; min-width: 0; }

.ugg-result-card__title {
  font-weight: var(--ds-fw-semi); font-family: var(--ds-font);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.ugg-result-card__title .ugg-emoji { display: inline-block; margin-right: 8px; vertical-align: -0.12em; }
.ugg-result-card--available   .ugg-result-card__title { color: var(--ds-black); }
.ugg-result-card--unavailable .ugg-result-card__title { color: var(--ds-mustard); }
.ugg-result-card__desc { font-family: var(--ds-font); color: var(--ds-gray-700); margin: 0; line-height: 1.55; }

/* =============================================================================
   Keyframes
   ============================================================================= */

@keyframes ds-spin         { to { transform: rotate(360deg); } }
@keyframes ds-spin-center  { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes ds-fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-dropdown-in  { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-slide-up     { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ugg-display-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ds-pop          { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ds-shake        { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-7px); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }

/* =============================================================================
   Responsive (form breakpoints are in the Form Row section above)
   ============================================================================= */

@media (max-width: 480px) {
  .ugg-checker { padding: 24px 20px 22px 20px; border-radius: 32px; }
  .ugg-checker__form { row-gap: 10px; }
  .ugg-otp__digit { width: 32px; }
  .ugg-autocomplete__input { height: 48px; }
}