:root {
   --bg-top: #ffffff;
   --bg-bottom: #fdfdfd;
   --fg: #111418;
   --muted: #6b7280;
   --line: #e5e7eb;
   --card: #ffffff;
   --brand: #2563eb;
   --brand-2: #059669;
   --radius: 16px;
   --shadow: 0 10px 24px rgba(0,0,0,.07);
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   margin: 0;
   height: 100%;
 }

 body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
   color: var(--fg);
   background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed;
   line-height: 1.55;
   overflow-x: hidden;
 }

 .container {
   max-width: 1200px;
   margin: 0 auto !important;
   padding: 0 16px;
 }

 .section {
   margin-top: 30px !important;
 }

 .hero {
   padding: clamp(36px, 6vw, 72px) 16px;
   text-align: center;
 }

 .logo {
   width: 180px;
   max-width: 40vw;
   height: auto;
   display: block;
   margin: 0 auto;
 }

 .kicker {
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--muted);
   font-size: .82rem;
   margin: .7rem 0 .2rem;
 }

 h1 {
   font-size: clamp(1.8rem, 4vw, 2.6rem);
   margin: .2rem 0 .4rem;
 }

 .sub {
   color: #374151;
   max-width: 800px;
   margin: 0 auto;
 }

 .cards {
   display: grid;
   gap: 24px;
   grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
   justify-content: center;
   justify-items: stretch;
 }

 .card {
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--card);
   border: 1px solid var(--line);
   box-shadow: var(--shadow);
   transition: transform .2s ease, box-shadow .2s ease;
   width: 100%;
 }

 .card:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(0,0,0,.10);
 }

 .card.is-rented {
   position: relative;
 }

 .card.is-rented::after {
   content: "VERMIETET";
   position: absolute;
   top: 30px;
   right: -62px;
   width: 245px;
   padding: 9px 0;
   background: linear-gradient(90deg, #7f1d1d, #dc2626, #ef4444);
   color: #fff;
   font-size: .92rem;
   font-weight: 950;
   letter-spacing: .14em;
   text-align: center;
   text-transform: uppercase;
   transform: rotate(35deg);
   z-index: 20;
   box-shadow: 0 10px 28px rgba(127,29,29,.35);
   pointer-events: none;
 }

 .card.is-rented .cta {
   background: #9ca3af;
   box-shadow: none;
   cursor: not-allowed;
   pointer-events: none;
   opacity: .85;
 }

 .rented-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fef2f2;
   color: #991b1b;
   border: 1px solid #fecaca;
   padding: 10px 14px;
   border-radius: 12px;
   font-weight: 800;
 }

 .media {
   position: relative;
   aspect-ratio: 16 / 10;
   border-bottom: 1px solid #dedede;
   overflow: hidden;
 }

 .media img {
   width: 100%;
   height: 100%;
   object-fit: fill;
   display: block;
   transition: transform .25s ease, filter .25s ease;
 }

 .media--gallery {
   cursor: pointer;
 }

 .media--gallery::after {
   content: "Bilder ansehen";
   position: absolute;
   right: 12px;
   bottom: 12px;
   z-index: 8;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(0, 0, 0, .75);
   color: #fff;
   font-size: .82rem;
   font-weight: 800;
   letter-spacing: .02em;
   box-shadow: 0 6px 16px rgba(0,0,0,.22);
   pointer-events: none;
 }

 .media--gallery:hover img {
   transform: scale(1.03);
 }

 .gallery-count {
   position: absolute;
   left: 12px;
   bottom: 12px;
   z-index: 8;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(255,255,255,.92);
   color: #111;
   font-size: .82rem;
   font-weight: 800;
   box-shadow: 0 6px 16px rgba(0,0,0,.16);
   pointer-events: none;
 }

 .ribbon {
   position: absolute;
   left: 14px;
   top: 14px;
   padding: 6px 10px;
   border-radius: 999px;
   background: #eef2ff;
   color: #1f2937;
   border: 1px solid #dbeafe;
   font-size: .8rem;
 }

 .overlay {
   position: absolute;
   inset: auto 0 0 0;
   padding: 12px 14px;
   background: linear-gradient(180deg, transparent, rgba(255,255,255,.35));
   color: #fff;
 }

 .overlay h3 {
   margin: 0;
   font-size: 1.6rem;
   color: #000;
   line-height: 2rem;
 }

 .renovation-banner {
   position: absolute;
   top: 16px;
   left: 16px;
   background: rgba(0, 0, 0, 0.75);
   color: #fff;
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   z-index: 3;
 }

 .card-body {
   padding: 16px 16px 18px;
 }

 .specs {
   display: block;
   min-height: 200px;
   color: #4b5563;
   font-size: .95rem;
   margin: 8px 0 10px;
 }

 .spec {
   display: inline-block;
   margin: 5px 0;
   align-items: center;
   padding: 6px 10px;
   border-radius: 999px;
   background: #f3f4f6;
   border: 1px solid var(--line);
 }

 .price {
   font-weight: 700;
   margin: 8px 0 14px;
 }

 .cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(90deg, var(--brand), #3b82f6);
   color: #fff;
   text-decoration: none;
   padding: 10px 14px;
   border-radius: 12px;
   font-weight: 700;
   box-shadow: 0 6px 16px rgba(37,99,235,.2);
 }

 .cta:hover {
   filter: brightness(1.05);
 }

 .cta svg {
   width: 18px;
   height: 18px;
 }

 .immo-band {
   margin: 20px auto;
   width: 90%;
   background: #fff;
   border-bottom: 1px solid var(--line);
 }

 .immo-band__inner {
   max-width: 1140px;
   margin: 0 auto;
   padding: 20px 16px;
   display: grid;
   gap: 18px;
   grid-template-columns: 1.4fr 1fr;
   align-items: center;
 }

 @media (max-width: 980px) {
   .immo-band__inner {
     grid-template-columns: 1fr;
     align-items: start;
   }
 }

 .keyfacts {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 14px;
   align-items: center;
 }

 .keyfact {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: #f9fafb;
   font-weight: 600;
   color: #111;
 }

 .keyfact svg {
   width: 18px;
   height: 18px;
   color: #111;
 }

 .energy {
   display: grid;
   gap: 8px;
 }

 .energy__row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
 }

 .energy__title {
   font-weight: 700;
 }

 .energy__value {
   color: #444;
 }

 .energybar {
   position: relative;
   height: 20px;
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid #e5e7eb;
   background: linear-gradient(90deg,
     #2ecc71 0%,
     #a3d977 14.28%,
     #e5e96a 28.56%,
     #ffe16b 42.84%,
     #ffc04d 57.12%,
     #ff9a3d 71.40%,
     #ff6b3d 85.68%,
     #e53935 100%
   );
 }

 .energybar__labels {
   position: absolute;
   inset: 0;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   font-size: 11px;
   color: #111;
   mix-blend-mode: multiply;
   align-items: center;
 }

 .energybar__labels span {
   text-align: center;
   text-shadow: 0 1px 0 rgba(255,255,255,.6);
 }

 .energybar__labels .is-active {
   font-weight: 800;
   text-decoration: underline;
 }

 .energybar__marker {
   position: absolute;
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 10px solid #111;
   transform: translateX(-50%);
   filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
 }

 .marker--a { left: calc(0 / 7 * 100%); }
 .marker--b { left: calc(1 / 7 * 100%); }
 .marker--c { left: calc(2 / 7 * 100%); }
 .marker--d { left: calc(3 / 7 * 100%); }
 .marker--e { left: calc(4 / 7 * 100%); }
 .marker--f { left: calc(5 / 7 * 100%); }
 .marker--g { left: calc(6 / 7 * 100%); }
 .marker--h { left: calc(7 / 7 * 100%); }

 .energy__class {
   padding: 2px 8px;
   border-radius: 8px;
   font-weight: 700;
   background: #ffe3e3;
   color: #b00020;
   border: 1px solid #f5caca;
 }

 .immo-route__inner {
   display: grid;
   gap: 18px;
   grid-template-columns: 1.1fr 1fr;
   align-items: start;
   max-width: 1120px;
   margin: 0 auto;
   padding: 22px 12px;
 }

 .immo-route__figure {
   margin: 0;
 }

 .immo-route__img {
   width: 100%;
   height: auto;
   border: 1px solid var(--line);
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0,0,0,.06);
 }

 .immo-route__caption {
   font-size: .8rem;
   color: #777;
   margin-top: 6px;
   text-align: center;
 }

 .immo-route__facts h2 {
   margin: 0 0 8px;
   font-size: 1.35rem;
 }

 .immo-route__note {
   margin: .5rem 0 0;
   font-size: .85rem;
   color: #666;
 }

 .immo-route__tablewrap {
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #fff;
 }

 .immo-route__table {
   width: 100%;
   border-collapse: collapse;
   font-size: .95rem;
 }

 .immo-route__table th,
 .immo-route__table td {
   padding: 9px 10px;
   border-bottom: 1px solid #eee;
   text-align: left;
   white-space: nowrap;
 }

 .immo-route__table thead th {
   background: #fafafa;
   font-weight: 600;
 }

 .immo-route__list {
   display: none;
 }

 .immo-route__item {
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 10px 12px;
   background: #fff;
 }

 .immo-route__item h3 {
   margin: 0 0 4px;
   font-size: 1rem;
 }

 .immo-route__item p {
   margin: 0;
   font-size: .9rem;
 }

 .contact {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: clamp(16px, 3vw, 24px);
   box-shadow: var(--shadow);
   max-width: 820px;
   margin: 100px auto;
 }

 form {
   display: grid;
   gap: 14px;
 }

 .row {
   display: grid;
   gap: 14px;
 }

 @media (min-width: 780px) {
   .row-2 {
     grid-template-columns: 1fr 1fr;
   }
 }

 label {
   font-weight: 700;
 }

 input,
 select,
 textarea {
   width: 100%;
   padding: 12px 14px;
   border-radius: 12px;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--fg);
   outline: none;
   color-scheme: light;
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 4px rgba(37,99,235,.12);
 }

 textarea {
   min-height: 140px;
   resize: vertical;
 }

 .hint {
   font-size: .85rem;
   color: var(--muted);
 }

 .actions {
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
 }

 button {
   background: linear-gradient(90deg, var(--brand), #3b82f6);
   color: #fff;
   font-size: 1rem;
   border: 0;
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 800;
   cursor: pointer;
   box-shadow: 0 8px 18px rgba(37,99,235,.2);
 }

 .ghost {
   background: #fff;
   color: #111;
   border: 1px solid var(--line);
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 700;
   font-size: 80%;
   text-decoration: none;
 }

 .msg {
   padding: 12px 14px;
   border-radius: 12px;
   margin-bottom: 12px;
   border: 1px solid var(--line);
 }

 .msg.ok {
   background: #ecfdf5;
   border-color: #bbf7d0;
   color: #065f46;
 }

 .msg.err {
   background: #fef2f2;
   border-color: #fecaca;
   color: #991b1b;
 }

 footer {
   padding: 28px 16px;
   text-align: center;
   color: var(--muted);
   font-size: .9rem;
 }

 footer a,
 .hint a {
   color: #111;
   text-decoration: none;
 }

 footer a:hover,
 .hint a:hover {
   text-decoration: underline;
 }

 .modal {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.45);
   z-index: 1000;
 }

 .modal .box {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 16px;
   max-width: 760px;
   margin: 8% auto;
   padding: 20px;
   position: relative;
   box-shadow: var(--shadow);
 }

 .close {
   position: absolute;
   right: 14px;
   top: 10px;
   font-size: 28px;
   background: none;
   border: 0;
   color: #111;
   cursor: pointer;
   box-shadow: none;
   padding: 0;
 }

 .sr {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0;
 }

 /* Galerie Modal */
 .gallery-modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 3000;
   background: rgba(0,0,0,.82);
   padding: 24px;
 }

 .gallery-modal.is-open {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .gallery-modal__box {
   width: min(1180px, 96vw);
   max-height: 92vh;
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 24px 80px rgba(0,0,0,.45);
   display: grid;
   grid-template-rows: auto 1fr auto;
 }

 .gallery-modal__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 14px 16px;
   border-bottom: 1px solid var(--line);
   background: #fff;
 }

 .gallery-modal__title {
   font-weight: 800;
   font-size: 1rem;
 }

 .gallery-modal__close {
   appearance: none;
   border: 0;
   background: #f3f4f6;
   color: #111;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   font-size: 28px;
   line-height: 1;
   cursor: pointer;
   box-shadow: none;
   padding: 0;
 }

 .gallery-modal__close:hover {
   background: #e5e7eb;
 }

 .gallery-modal__stage {
   position: relative;
   background: #111;
   min-height: 360px;
   height: min(68vh, 720px);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .gallery-modal__stage img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   display: block;
 }

 .gallery-modal__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 46px;
   height: 46px;
   border-radius: 999px;
   border: 0;
   background: rgba(255,255,255,.92);
   color: #111;
   font-size: 32px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 22px rgba(0,0,0,.28);
   padding: 0;
 }

 .gallery-modal__nav:hover {
   background: #fff;
 }

 .gallery-modal__nav--prev {
   left: 16px;
 }

 .gallery-modal__nav--next {
   right: 16px;
 }

 .gallery-modal__footer {
   display: flex;
   gap: 10px;
   overflow-x: auto;
   padding: 12px;
   border-top: 1px solid var(--line);
   background: #fff;
 }

 .gallery-thumb {
   flex: 0 0 auto;
   width: 86px;
   height: 58px;
   border: 2px solid transparent;
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
   background: #f3f4f6;
   padding: 0;
   box-shadow: none;
 }

 .gallery-thumb.is-active {
   border-color: var(--brand);
 }

 .gallery-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 @media (max-width: 980px) {
   .immo-route__inner {
     grid-template-columns: 1fr;
     max-width: 95%;
   }
 }

 @media (max-width: 720px) {
   .immo-route__tablewrap {
     display: none;
   }

   .immo-route__list {
     display: grid;
     gap: 8px;
   }

   .gallery-modal {
     padding: 10px;
   }

   .gallery-modal__box {
     width: 100%;
     max-height: 94vh;
     border-radius: 14px;
   }

   .gallery-modal__stage {
     min-height: 280px;
     height: 62vh;
   }

   .gallery-modal__nav {
     width: 40px;
     height: 40px;
     font-size: 28px;
   }

   .gallery-thumb {
     width: 72px;
     height: 50px;
   }

   .media--gallery::after {
     font-size: .76rem;
     padding: 7px 10px;
   }

   .gallery-count {
     font-size: .76rem;
     padding: 7px 10px;
   }
 }


 /* ================================
    Premium Gallery Overlay
 ================================ */

 .media {
   position: relative;
   aspect-ratio: 16 / 10;
   border-bottom: 1px solid #dedede;
   overflow: hidden;
   background: #111;
 }

 .media img {
   width: 100%;
   height: 100%;
   object-fit:fill;
   display: block;
   transition:
     transform .55s cubic-bezier(.22, 1, .36, 1),
     filter .35s ease;
 }

 .media--gallery {
   cursor: pointer;
 }

 .media--premium {
   isolation: isolate;
 }

 .media-gradient {
   position: absolute;
   inset: 0;
   z-index: 2;
   background:
     linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.78) 100%),
     linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 48%, rgba(0,0,0,.22) 100%);
   pointer-events: none;
 }

 .media-shine {
   position: absolute;
   inset: 0;
   z-index: 3;
   background:
     radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 28%),
     radial-gradient(circle at 82% 12%, rgba(255,255,255,.10), transparent 24%);
   opacity: .9;
   pointer-events: none;
   transition: opacity .35s ease, transform .45s ease;
 }

 .media-topline {
   position: absolute;
   z-index: 6;
   top: 14px;
   left: 14px;
   right: 14px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
   pointer-events: none;
 }

 .status-chip {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 34px;
   padding: 7px 12px;
   border-radius: 999px;
   font-size: .76rem;
   font-weight: 900;
   letter-spacing: .06em;
   text-transform: uppercase;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 8px 24px rgba(0,0,0,.18);
   white-space: nowrap;
 }

 .status-chip svg {
   width: 15px;
   height: 15px;
   flex: 0 0 15px;
 }

 .status-chip--rented {
   background: rgba(153, 27, 27, .90);
   color: #fff;
   border: 1px solid rgba(255,255,255,.16);
 }

 .status-chip--gallery {
   background: rgba(255,255,255,.90);
   color: #111827;
   border: 1px solid rgba(255,255,255,.48);
 }

 .media-content {
   position: absolute;
   z-index: 6;
   left: 16px;
   right: 16px;
   bottom: 16px;
   color: #fff;
   pointer-events: none;
 }

 .media-kicker {
   display: inline-flex;
   margin-bottom: 6px;
   font-size: .76rem;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255,255,255,.78);
 }

 .media-content h3 {
   margin: 0 0 6px;
   font-size: clamp(1.7rem, 3vw, 2.1rem);
   line-height: 1.02;
   color: #fff;
   text-shadow: 0 3px 18px rgba(0,0,0,.30);
 }

 .media-subline {
   margin: 0 0 12px;
   font-size: .92rem;
   line-height: 1.35;
   color: rgba(255,255,255,.88);
   text-shadow: 0 2px 10px rgba(0,0,0,.22);
 }

 .media-action {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   width: fit-content;
   padding: 10px 14px;
   border-radius: 999px;
   background: rgba(255,255,255,.16);
   color: #fff;
   border: 1px solid rgba(255,255,255,.28);
   font-size: .84rem;
   font-weight: 850;
   letter-spacing: .01em;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 8px 26px rgba(0,0,0,.16);
   transition:
     background .25s ease,
     border-color .25s ease,
     transform .25s ease,
     box-shadow .25s ease;
 }

 .media-action svg {
   width: 17px;
   height: 17px;
   transition: transform .25s ease;
 }

 .media--gallery:hover img,
 .media--gallery:focus-visible img {
   transform: scale(1.06);
 }

 .media--gallery:hover .media-shine,
 .media--gallery:focus-visible .media-shine {
   opacity: 1;
   transform: scale(1.03);
 }

 .media--gallery:hover .media-action,
 .media--gallery:focus-visible .media-action {
   background: rgba(255,255,255,.22);
   border-color: rgba(255,255,255,.42);
   transform: translateY(-1px);
   box-shadow: 0 12px 30px rgba(0,0,0,.18);
 }

 .media--gallery:hover .media-action svg,
 .media--gallery:focus-visible .media-action svg {
   transform: translateX(3px);
 }

 .media--gallery:focus-visible {
   outline: 3px solid rgba(37,99,235,.45);
   outline-offset: -3px;
 }

 /* Standard-Overlay für WE1 / WE3 */
 .overlay {
   position: absolute;
   z-index: 4;
   inset: auto 0 0 0;
   padding: 12px 14px;
   background: linear-gradient(180deg, transparent, rgba(255,255,255,.35));
   color: #fff;
 }

 .overlay h3 {
   margin: 0;
   font-size: 1.6rem;
   color: #000;
   line-height: 2rem;
 }

 @media (max-width: 640px) {
   .media-topline {
     flex-direction: column;
     align-items: flex-start;
     right: auto;
   }

   .media-content h3 {
     font-size: 1.5rem;
   }

   .media-subline {
     font-size: .86rem;
   }

   .media-action {
     padding: 9px 12px;
     font-size: .8rem;
   }
 }




/* Alter Standard-Overlay-Fallback für WE 1 / WE 3 */
.overlay {
  position: absolute;
  z-index: 4;
  inset: auto 0 0 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.35));
  color: #fff;
}

.overlay h3 {
  margin: 0;
  font-size: 1.6rem;
  color: #000;
  line-height: 2rem;
}