/* =========================================================
   Fonts
========================================================= */

/* Poppins 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-v24-latin-400.woff2') format('woff2');
}

/* Poppins 500 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-v24-latin-500.woff2') format('woff2');
}

/* Work Sans 400 */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/work-sans-v24-latin-400.woff2') format('woff2');
}

/* Work Sans 600 */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/work-sans-v24-latin-600.woff2') format('woff2');
}


/* =========================================================
   Color Variables
========================================================= */
:root {

    /* Base */
    --bg-body: #F4F4F4;
    --bg-white: #ffffff;
    --bg-light: #f0f0f0;

    /* Brand DARK TEAL */
    --primary: #084654;
    --primary-dark: #06333D;

    /* Accent GOLD */
    --accent: #D8C6BC;
    --accent-bg: #faf6f2;

    --secondary-bg: #dcfaff;
    --secondary-bg-hover: #D0EDF2;

    /* Text */
    --text-main: #084654;
    --text-inverse: #ffffff;

    /* Borders */
    --border-default: #ccc;
    --border-light: #ddd;
    --border-muted: #e0e0e0;

    /* Validation */
    --success: #4CAF50;
    --error: #dd4444;
    --error-bg: #ffefef;
    --error-border: #dd4444;
    --error-text: #a80000;

}


/* =========================================================
   Base Reset & Layout
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    /*font-family: "-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue",sans-serif;*/
    font-family: "Work Sans",sans-serif;
    font-weight: 400;
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}

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


/* =========================================================
   Header
========================================================= */
.header {
    position: relative;
    z-index: 20;
    background: var(--bg-white);
    /*border-bottom: 1px solid var(--border-muted);*/
    box-shadow: 0px 1px 8px rgba(0,0,0,0.02);
}

/* Layout */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
}

/* Logo */
.header .logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo-svg {
    height: 22px;
    width: auto;
    display: block;
    fill: var(--primary);
    transition: fill 0.2s ease, transform 0.2s ease;
}

/*
.logo-svg [fill] {
    transition: fill 0.2s ease;
}

.logo a:hover .logo-svg {
    fill: var(--primary-dark);
}*/

/* Navigation */
.header nav ul {
    font-family: "Poppins",sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    list-style: none;
    gap: 26px;
    margin: 0;
    padding: 0;
}

.header nav li {
    margin: 0;
}

.header nav a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.header nav a:hover {
    color: var(--primary);
}

/* dezente Unterlinie beim Hover */
.header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.header nav a:hover::after {
    transform: scaleX(1);
}

/* Language Switch */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.lang-switch a {
    text-decoration: none;
    color: var(--text-main);
    opacity: 0.5;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.lang-switch a:hover {
    opacity: 1;
    text-decoration: none;
}

.lang-switch a.is-active {
    opacity: 1;
}

/* ------------------- */
/* INVERTED NAVIGATION */
/* ------------------- */

.header.inverted {
    background: var(--primary);
}

.inverted .logo-svg {
    fill: var(--text-inverse);
}

.header.inverted .logo {
    color: var(--text-inverse);
}

.header.inverted nav a {
    font-weight: 400;
    color: var(--text-inverse);
}

.header.inverted nav a:hover {
    color: var(--accent);
}

.header.inverted a::after {
    background: var(--accent);
}

.inverted .lang-switch a {
    color: var(--text-inverse);
}


/* =========================================================
   Sections
========================================================= */
section {
    padding: 90px 0;
    position: relative;
}

section.light {
    background: var(--bg-white);
}

section.dark {
    background: var(--bg-light);
}

section.section-form {
    background: var(--bg-light);
    /*background: var(--primary);*/
}

.section-hero {
    color: #fff;
    overflow: hidden;
}

.section-hero .section-bg {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/stmoritzimmo-view.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.section-hero .section-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /*background: var(--primary);*/
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--primary) 50%, transparent),
        color-mix(in srgb, var(--primary) 40%, transparent),
        color-mix(in srgb, var(--primary) 50%, transparent)
    );
}

.section-hero .container {
    position: relative;
    z-index: 1;
}

.hero-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.hero-content h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.5em;
}

.hero-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.section-hero--visual {
    min-height: 50vh;
    padding: 0;
}


/* =========================================================
   Typography
========================================================= */
h1, h2, h3 {
    font-family: "Poppins",sans-serif;
    margin-bottom: 20px;
    font-weight: 400;
}

p {
    margin-bottom: 15px;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.btn {
    text-decoration: none;
}

/* =========================================================
   Images
========================================================= */
.image {
    width: 100%;
    overflow: hidden;
}

.image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   Columns
========================================================= */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Standard 50/50 */
    gap: 40px;
    align-items: center;
}

/* Text etwas breiter */
.two-column.text-wide {
    grid-template-columns: 60% 40%;
}

/* Bild etwas breiter */
.two-column.image-wide {
    grid-template-columns: 40% 60%;
}

/* Klassisch */
.two-column.equal {
    grid-template-columns: 1fr 1fr;
}

.image-left .image {
    order: 1;
}
.image-left .text {
    order: 2;
}

.image-right .text {
    order: 1;
}
.image-right .image {
    order: 2;
}


/* =========================================================
   Info Tiles
========================================================= */
.info-tiles {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* Einzelne Kachel */
.info-tile {
  background: var(--bg-light);
  border: 1px solid var(--border-default);
  padding: 28px 26px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover (subtil!) */
.info-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Titel */
.info-tile h3 {
    position: relative;
    font-size: 17px;
    font-weight: 600;
    padding-bottom: 14px;
    margin-bottom: 16px;
    color: var(--text-main);
}

.info-tile h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--accent);
}

/* Text */
.info-tile p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--text-main);
  opacity: 0.9;
}



/* =========================================================
   Form Steps & Fields (Unified Inputs)
========================================================= */
.form-step {
    display: none;
    background: var(--bg-white);
    padding: 30px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.form-step.active {
    display: block;
}

.step-content {
    margin-bottom: 30px;
}

label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}


/* Unified Input Styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: 3px;
    font-size: 15px;
    margin-bottom: 0;
    background: var(--bg-white);
    color: var(--text-main);
    appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}


/* Remove Number Spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


/* Custom Select Arrow */
select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--primary) 50%),
        linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}


/* =========================================================
   Focus States
========================================================= */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}


/* =========================================================
   Form Grid (Step 2–4)
========================================================= */
.form-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
}

.form-group .full {
    grid-column: span 2;
}

.form-group > label {
    display: flex;
    flex-direction: column;
}

.form-group.rating-group {
    margin-top: 15px;
    grid-column: span 2;
    display: block;
}

.rating-group > p {
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--text-main);
}


/* =========================================================
   Tile Kacheln (Immobilienart + Subtypes)
========================================================= */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin: 20px 0 35px;
}

.tile {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--border-light);
    border-radius: 3px;
    padding: 20px 15px;
    background: var(--bg-white);
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tile img {
    width: 56px;
    margin-bottom: 12px;
    pointer-events: none;
    transition: filter 0.25s ease;
    filter: brightness(0) saturate(100%) invert(16%)
            sepia(56%) saturate(1537%)
            hue-rotate(164deg)
            brightness(91%) contrast(104%);
}

.tile span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

/* Hover */
.tile:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

/* Checked */
.tile:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--primary);
    transform: translateY(-1px);
}

.tile:has(input[type="radio"]:checked) span {
    color: var(--text-inverse);
}

.tile:has(input[type="radio"]:checked) img {
    filter: brightness(0) invert(1);
}

.tile-content {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   Rating Tiles
========================================================= */
.rating-tiles {
    margin-top: 10px;
}

.rating-tiles .stars {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    color: var(--primary);
    transition: color 0.25s ease;
}

.rating-tiles span {
    font-size: 14px;
    font-weight: 500;
}

.rating-tiles .tile:hover .stars {
    color: var(--primary-dark);
}

.rating-tiles .tile:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--primary);
}

.rating-tiles .tile:has(input[type="radio"]:checked) .stars,
.rating-tiles .tile:has(input[type="radio"]:checked) span {
    color: var(--text-inverse);
}


/* =========================================================
   Honeypot
========================================================= */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* =========================================================
   Form Navigation
========================================================= */
.form-nav {
    display: flex;
    gap: 15px;
}


/* =========================================================
   Errors & Validation
========================================================= */
.form-error {
    position: relative;
    background: var(--error-bg);
    border: 0px solid var(--error-border);
    color: var(--error-text);

    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    margin-bottom: 0;
    border-radius: 3px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);

    transition:
        max-height 0.3s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0.25s;
}

#form-error.is-visible {
    max-height: 500px;
    border: 1px solid var(--error-border);

    padding: 15px 30px;
    margin-bottom: 25px;

    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition-delay: 0s;
}

.error-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .8;
}

.error-close:hover {
    opacity: 1;
}

.input-valid {
    /*border-color: var(--success) !important;*/
    border-color: var(--primary) !important;
}

.input-error {
    border-color: var(--error) !important;
    animation: shake 0.18s linear 2;
}

select.input-error {
    border-color: var(--error) !important;
}

select.input-valid {
    /*border-color: var(--success) !important;*/
    border-color: var(--primary) !important;
}

.rating-tiles.tile-error .tile {
    border-color: var(--error);
    background: var(--error-bg);
    animation: shake 0.18s linear 2;
}

.rating-tiles.tile-error .stars {
    color: var(--error-text);
}

.tile-grid.tile-error .tile {
    border-color: var(--error);
    background: var(--error-bg);
    animation: shake 0.18s linear 2;
}

.form-error ul {
    margin: 0;
    padding-left: 30px;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}


/* =========================================================
   Buttons
========================================================= */
.btn {
    padding: 12px 22px;
    background: var(--primary);
    border: 2px solid var(--primary);
    color: var(--text-inverse);
    border-radius: 3px;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn.secondary {
    background: var(--secondary-bg);
    border-color: var(--secondary-bg);
    color: var(--text-main);
}

.btn.secondary:hover {
    background: var(--secondary-bg-hover);
    border-color: var(--secondary-bg-hover);
}

.btn:focus {
    outline: none;
}

.button-group {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    /*justify-content: center;*/
}

.button-group .btn {
    width: auto;
}

/* =========================================================
   Progressbar
========================================================= */
.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 50px;
    padding: 0 10px;
}

/* Grundlinie – endet an den Kreisen */
.progress-line {
    position: absolute;
    top: 50%;
    left: 18px;
    right: 18px;
    height: 4px;
    background: var(--border-muted);
    transform: translateY(-50%);
    z-index: 1;
}

/* Fortschrittslinie – exakt gleich begrenzt */
.progressbar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    right: 18px;
    height: 4px;
    background: var(--primary);
    transform: translateY(-50%) scaleX(var(--progress-scale, 0));
    transform-origin: left center;
    transition: transform 0.35s ease;
    z-index: 2;
}

/* Steps */
.progress-step {
    width: 36px;
    height: 36px;
    background: var(--border-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-main);
    position: relative;
    z-index: 3;
}

.progress-step.active,
.progress-step.completed {
    background: var(--primary);
    color: var(--text-inverse);
}



/* =========================================================
   Footer
========================================================= */
.footer {
    background: var(--primary);
    color: var(--text-inverse);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 40px;
  padding-top: 90px;
  padding-bottom: 60px;
}

/* Grid Positionierung */
.footer-brand {
    grid-column: 1;
    grid-row: 1;
}

.footer-address {
    /*text-align: center;*/
    grid-column: 2;
    grid-row: 1;
}

.footer-contact {
    margin-top: 20px;
}

.footer-links {
    grid-column: 3;
    grid-row: 1;
    /*text-align: right;*/
}

.footer-copyright {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-size: 13px;
    opacity: 0.7;
    text-align: left;
}

/* Zeile 2 rechts – Credit */
.footer-credit {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    font-size: 13px;
    opacity: 0.7;
    /*text-align: right;*/
}

/* Logo und Claim */
.footer-logo {
    display: inline-block;
}

.footer .logo-svg {
    height: 22px;
    width: auto;
    display: block;
    fill: var(--text-inverse);
}

.footer-claim {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.85;
}

/* Adresse und Kontakt */
.footer-address span {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
    opacity: 0.9;
}

.footer-address .company {
    font-weight: 600;
    /*margin-bottom: 8px;*/
}

.footer-contact a {
    display: block;
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    margin-top: 3px;
}

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

/* Social Icons */
.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    /*justify-content: center;*/
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /*background: rgba(255,255,255,0.12);*/
    opacity: 0.85;
    transition: opacity 0.2s ease
}

.footer-social a:hover {
    /*background: rgba(255,255,255,0.18);*/
    opacity: 1;
}

.footer-social svg {
    width: 22px;
    height: 22px;
    fill: var(--text-inverse);
}

/* Footer Links – rechts, vertikal */
.footer-links a {
    display: block;
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 3px;
}

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

/* Footer Credits */
.footer-credit a {
    opacity: 0.85;
    transition: opacity 0.2s ease
}

.footer-credit a:hover {
    opacity: 1;
}

.footer-credit .credit-svg {
    height: 10px;
    width: auto;
    display: inline-block;
    fill: var(--text-inverse);
}




/* =========================================================
   Responsive
========================================================= */
@media (max-width: 768px) {

    section {
        padding: 60px 0;
    }

    .header-container {
        flex-direction: column;
        gap: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .header nav ul {
        gap: 16px;
    }

    .lang-switch {
        margin-top: 0px;
    }

    /* Buttons */
    .btn {
        width: 100%;
        text-align: center;
    }

    .button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .button-group .btn {
        width: 100%;
        text-align: center;
    }

    /* Colums */
    .two-column {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .two-column .text {
        order: 1;
    }

    .two-column .image {
        order: 2;
    }

    .form-group {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-group .full {
        grid-column: span 1;
    }

    /* Info Tiles */
    .info-tiles {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 32px;
        text-align: center;
    }

    .footer-brand,
    .footer-address,
    .footer-links,
    .footer-copyright,
    .footer-credit {
        grid-column: 1;
        grid-row: auto;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-credit,
    .footer-copyright {
        text-align: center;
    }

    .footer-links {
        text-align: center;
    }

}

@media (max-width: 480px) {

    .logo-svg {
        height: 22px;
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }

    .progress-step {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .form-nav {
        flex-direction: column;
        gap: 15px;
    }

}


/* =========================================================
   EMBED OVERRIDES
========================================================= */

body.embed html {
    scroll-behavior: auto;
    overflow: hidden;
}

body.embed {
    background: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body.embed main {
    display: block;
}

/* Wrapper darf NICHT wachsen */
body.embed #embed-form-wrapper {
    display: block;
    width: 100%;
    overflow: visible;
}

/* Container im Embed → volle Breite */
body.embed .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Header / Footer im Embed zuverlässig ausblenden */
body.embed .header,
body.embed .footer {
    display: none !important;
}

/* Sections im Embed kompakter */
body.embed section {
    padding: 0;
    min-height: 0 !important;
    height: auto !important;
}

/* Formular-Section */
body.embed .section-form {
    background: transparent;
    padding: 0;
}

/* Form-Step: angenehm, aber nicht zu „boxed“ */
body.embed .form-step {
    margin-bottom: 0px;
    background: var(--bg-body);
    box-shadow: none;
}

/* Buttons im Embed minimal kompakter */
body.embed .btn {
    font-size: 15px;
}

/* Fortschrittsanzeige etwas enger */
body.embed .progressbar {
    margin: 30px 0 35px;
}

/* Fehlerbox: nicht überschneiden */
body.embed .form-error {
    scroll-margin-top: 30px;
}

/* Mobile Embed Feinschliff */
@media (max-width: 768px) {
    body.embed .form-step {
        padding: 24px 20px;
    }
}