/* ===== Landingpage "La Dolce Vita" – Mionetto ===== */

@font-face {
    font-family: 'mio-script';
    src: url('../font/mio-script.woff2') format('woff2'),
         url('../font/mio-script.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Optima LP';
    src: url('../font/Optima-Regular.woff2') format('woff2'),
         url('../font/Optima-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Optima LP';
    src: url('../font/Optima-Bold.woff2') format('woff2'),
         url('../font/Optima-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

.lp {
    --orange: #EB6400;
    --black: #000000;
    font-family: 'Optima LP', 'Optima', 'Segoe UI', sans-serif;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.5;
}

/* Aus dem Bootstrap-.container ausbrechen für volle Breite */
.lp-full {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

/* Kein horizontales Scrollen: .lp-full nutzt 100vw (inkl. Scrollbar-Breite),
   was auf Geräten mit platzraubender Scrollbar ~Scrollbar-Breite Overflow erzeugt.
   overflow-x:hidden am Root kappt diesen Überstand (Full-Bleed bleibt erhalten). */
html, body { overflow-x: hidden; }

.lp .script {
    font-family: 'mio-script', cursive;
    font-weight: 400;
    line-height: 1;
}

.lp h1, .lp h2, .lp h3 { margin: 0; }

/* Bestehende Theme-Regeln für die Landingpage neutralisieren
   (.container ist orange + 1920px breit, section erzwingt 100vh) */
main.container {
    max-width: none;
    background-color: #FFFFFF;
    padding-left: 0;
    padding-right: 0;
}
.lp section { min-height: 0; }

/* ---------- Hero ---------- */
/* Hero füllt randlos die volle Breite (via .lp-full = 100vw); das Bild
   deckt den gesamten Hero per cover ab (minimaler Beschnitt, zentriert) */
.lp-hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    background-color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Wrapper füllt den kompletten Hero — Overlays ankern am Bildrand */
.lp-hero__media {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
}
.lp-hero__img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.lp-hero__logo {
    position: absolute;
    top: 1%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.lp-hero__logo img { width: 200px; max-width: 40%; }

.lp-hero__copy {
    position: absolute;
    top: 16%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.lp-hero__headline {
    display: block;
    width: clamp(240px, 60%, 560px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.25));
}

.lp-badge {
    position: absolute;
    right: 20%;
    bottom: 4%;
    width: clamp(110px, 22%, 230px);
    z-index: 3;
    transition: transform .15s ease;
}
.lp-badge img { width: 100%; height: auto; display: block; }
.lp-badge:hover { transform: scale(1.04); }

/* ---------- Orange Intro-Band ---------- */
.lp-band {
    background: var(--orange);
    color: #000;
    text-align: center;
    padding: clamp(40px, 6vw, 80px) 20px;
}
.lp-band .script {
    color: #fff;
    font-size: clamp(2.2rem, 5.4vw, 76px);
    line-height: .85;
    margin-bottom: .4em;
}
.lp-band .lead {
    color: #000;
    font-weight: 400;
    max-width: 1080px;
    margin: 0 auto .8em;
    font-size: clamp(1.3rem, 2.6vw, 34px);
    line-height: 1.15;
}
.lp-band .lead strong { font-weight: 700; }
.lp-band .terms {
    color: #000;
    max-width: 640px;
    margin: 0 auto 1.5em;
    font-size: clamp(.8rem, 1.4vw, 17.85px);
    line-height: 1.125;
}
.lp-band .terms a { color: #000; text-decoration: underline; }

.lp-btn {
    display: inline-block;
    background: #fff;
    color: var(--orange);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    padding: .35em 1.4em;
    border-radius: 999px;
    font-size: clamp(1.3rem, 2.8vw, 40px);
    line-height: 1.4;
    border: 2px solid #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-btn:hover,
.lp-btn:focus-visible { background: var(--orange); color: #fff; border-color: #000; }

/* ---------- Galerie-Mosaik (3 Kacheln, zufällige Effekt-Wechsel) ---------- */
.lp-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1vw, 18px);
    background: #000;
    padding: clamp(8px, 1vw, 18px);
}
.lp-mosaic__tile {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
}
.lp-mosaic__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform, filter;
    transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;
    backface-visibility: hidden;
}

@media (max-width: 600px) {
    .lp-mosaic { grid-template-columns: 1fr; }
    /* Auf Mobil nur ein Bild zeigen */
    .lp-mosaic__tile:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-mosaic__layer { transition: none; }
}

/* ---------- Weißer Abschnitt: Reise auf einen Blick ---------- */
.lp-overview {
    text-align: center;
    padding: clamp(40px, 7vw, 90px) 20px;
}
.lp .lp-section-title {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--orange);
    font-size: clamp(1.9rem, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: .01em;
    margin-bottom: 1em;
}
.lp-overview__grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: clamp(28px, 4vw, 56px);
}
.lp-overview__item h3 {
    color: var(--orange);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.5vw, 34px);
    line-height: 1.05;
    margin-bottom: .15em;
}
.lp-overview__item p {
    margin: 0;
    color: #000;
    font-size: clamp(1.25rem, 2.2vw, 30px);
    line-height: 1.15;
}

/* ---------- Orange Abschnitt: In 3 Schritten ---------- */
.lp-steps {
    background: var(--orange);
    color: #fff;
    text-align: center;
    padding: clamp(40px, 7vw, 80px) 20px;
}
.lp .lp-steps__title {
    font-family: 'mio-script', cursive;
    text-transform: none;
    font-size: clamp(2.2rem, 5.4vw, 76px);
    line-height: .9;
    margin-bottom: clamp(36px, 5vw, 80px);
}
.lp-steps__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, 80px);
    max-width: 1200px;
    margin: 0 auto;
}
.lp-step { width: clamp(200px, 24vw, 300px); }
.lp-step__icon {
    display: block;
    width: clamp(120px, 15vw, 200px);
    height: auto;
    margin: 0 auto clamp(16px, 2vw, 28px);
}
.lp-step p {
    font-weight: 700;
    font-size: clamp(1.05rem, 1.9vw, 28px);
    line-height: 1.1;
    margin: 0;
}

/* ---------- Formular-Abschnitt ---------- */
.lp-form {
    background: var(--orange);
    color: #fff;
    padding: clamp(30px, 5vw, 60px) 0 clamp(40px, 6vw, 70px);
}
.lp .lp-form__title {
    font-family: 'mio-script', cursive;
    text-transform: none;
    font-size: clamp(2.2rem, 5.4vw, 76px);
    line-height: .9;
    text-align: center;
    margin-bottom: 1em;
    padding: 0 16px;
}

/* Formularfelder — Layout/Position unverändert, nur Farben & Schrift */
.lp-form .form-container {
    background: transparent;
    /* Seitliches Padding fängt die negativen Margins von .row ab (sonst H-Overflow/weißer Streifen)
       und hält das Formular vom Rand weg */
    padding: 0 clamp(16px, 4vw, 32px);
    max-width: 1040px;
    margin: 0 auto;
}
.lp-form .form-label {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 700; /* fett → weiße Schrift auf Orange erfüllt als "große Schrift" WCAG AA (3:1) */
    color: #fff;
    font-size: clamp(1.2rem, 1.5vw, 22px);
    line-height: 1.1;
    margin-bottom: .3em;
}
.lp-form .form-control,
.lp-form .form-select {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-size: clamp(1rem, 1.4vw, 20px);
}

/* Checkbox-Texte: 18+ und Teilnahmebedingungen */
.lp-form .form-check-label {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 700; /* fett für ausreichenden Kontrast auf Orange (WCAG AA, große Schrift) */
    color: #fff;
    font-size: clamp(1.2rem, 1.65vw, 23.94px);
    line-height: 1.15;
}
.lp-form .form-check-label a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Größere Tap-Flächen für Checkboxen (WCAG 2.5.8: ≥24×24px) */
.lp-form .form-check {
    padding-left: 2.3rem;
    min-height: 1.65rem;
}
.lp-form .form-check-input {
    width: 1.65rem;
    height: 1.65rem;
    margin-left: -2.3rem;
    margin-top: .1rem;
    cursor: pointer;
}
.lp-form .form-check-input:checked {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}
.lp-form .form-check-label { cursor: pointer; }

/* "* Pflichtfelder" zentriert wie Vorlage */
.lp-form .form-container p,
.lp-form .form-container p small {
    text-align: center !important;
    color: #fff;
    font-weight: 700; /* fett + ≥19px → Kontrast auf Orange ausreichend */
    font-size: clamp(1.2rem, 1.5vw, 20px);
}
.lp-form form > p {
    margin-top: clamp(20px, 3vw, 40px) !important;
}

/* Mehr Abstand zwischen Checkboxen und Teilnehmen-Button */
.lp-form form .d-grid { margin-top: clamp(34px, 5vw, 64px) !important; }

/* Teilnehmen-Button: weiß mit orangem Text */
.lp-form .btn-primary {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    background-color: #fff;
    border: 2px solid #fff;
    color: var(--orange);
    border-radius: 999px;
    font-size: clamp(1.3rem, 2.6vw, 38px);
    padding: .35em 1.4em;
}
.lp-form .btn-primary:hover,
.lp-form .btn-primary:focus-visible {
    background-color: var(--orange);
    border-color: #000;
    color: #fff;
}

/* Cin Cin (fertige Grafik aus dem Asset-Ordner) */
.lp-cincin {
    text-align: center;
    margin-top: clamp(30px, 5vw, 50px);
}
.lp-cincin img {
    display: block;
    width: clamp(280px, 45vw, 620px);
    height: auto;
    margin: 0 auto;
}

/* Footer (Impressum/Datenschutz) — orange, gestapelt & zentriert wie Vorlage */
footer.container {
    margin-top: 0;
    max-width: none;
    background-color: #EB6400 !important; /* außerhalb von .lp → var(--orange) nicht verfügbar */
}
footer.container .row { flex-direction: column; row-gap: 1.5rem; }
footer.container img { filter: none; } /* schwarzes Logo (Logo-finale-nero) */
footer.container a {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 400;
    font-size: 27px;
    line-height: 58.22px;
    color: #000;
    text-align: center;
}

@media (max-width: 768px) {
    /* Hero: feste Höhe + cover (das breite Bild würde bei height:auto nur ~260px
       hoch werden → Logo/Headline/Störer überlappen). So bleibt genug Platz. */
    .lp-hero { height: 82vh; }
    .lp-hero__media { height: 100%; width: 100%; }
    .lp-hero__img { height: 100%; width: 100%; object-fit: cover; object-position: center 30%; }
    .lp-hero__logo { top: 2.5%; }
    .lp-hero__logo img { width: 128px; max-width: 32%; }
    .lp-hero__copy { top: 15%; }
    .lp-badge { right: 4%; }
}

/* ===================== Thankyou-Seite ===================== */
/* Hero: identisch zum Landing-Header — randlos/cover, volle Breite, 100vh
   (Desktop) bzw. 82vh (Mobil). Erbt komplett von .lp-hero, keine Overrides. */

/* Headline "Die Spannung steigt!" (Bild) */
.ty-hero__copy {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.ty-headline-img {
    display: block;
    width: clamp(280px, 56%, 700px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .22));
}

/* Danke-Band */
.ty-greeting {
    color: #000;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 34px);
    margin: 0 0 .1em;
}
.ty-danke {
    color: #000;
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 54px);
    line-height: 1;
    margin: 0 0 .4em;
}

/* Galerie-Streifen (4 Bilder in einer Reihe) */
.ty-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.ty-gallery img {
    width: 100%;
    height: clamp(150px, 16vw, 240px);
    object-fit: cover;
    display: block;
}

/* "Und so geht's weiter" */
.ty-weiter__title {
    font-family: 'Optima LP', 'Optima', sans-serif;
    text-transform: none;
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 44px);
    line-height: 1.1;
    margin: 0 0 .6em;
}
.ty-weiter__text {
    color: #fff;
    font-weight: 600;
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.1rem, 2vw, 26px);
    line-height: 1.25;
}

/* Abschluss-Bild (Prosecco-Region) — ganz sichtbar, zentriert, nicht volle Breite */
.ty-bottom {
    background: var(--orange);
    padding: clamp(24px, 4vw, 56px) 16px;
    text-align: center;
}
.ty-bottom img {
    display: block;
    width: 100%;
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .ty-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== "Demnächst"-Hinweisseite ===================== */
.lp .lp-soon {
    background: var(--orange);
    min-height: 100vh; /* .lp .lp-soon schlägt das .lp section { min-height:0 }-Reset */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: clamp(40px, 8vw, 90px) 20px;
}
.lp-soon__logo {
    width: clamp(150px, 22vw, 240px);
    height: auto;
    margin-bottom: clamp(28px, 5vw, 56px);
    filter: brightness(0) invert(1); /* weißes Logo auf Orange */
}
.lp-soon__kicker {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    font-size: clamp(1rem, 2vw, 20px);
    margin: 0 0 .4em;
}
.lp .lp-soon__title {
    font-family: 'mio-script', cursive;
    text-transform: none;
    font-weight: 400;
    color: #fff;
    font-size: clamp(2.6rem, 8vw, 104px);
    line-height: .9;
    margin: 0 0 .45em;
}
.lp-soon__text {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: clamp(1.2rem, 2.4vw, 28px);
    line-height: 1.3;
    max-width: 620px;
    margin: 0 auto;
}

/* Vorschau-Login-Formular */
.lp-soon__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 340px;
    margin: 10px auto 0;
}
.lp-soon__form input {
    font-family: 'Optima LP', 'Optima', sans-serif;
    font-size: 18px;
    padding: .7em .9em;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
}
.lp-soon__form input::placeholder { color: #9a9a9a; }
.lp-soon__form .lp-btn {
    margin-top: 6px;
    cursor: pointer;
    font-size: clamp(1.1rem, 2vw, 22px);
}
.lp-soon__error {
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, .18);
    border-radius: 6px;
    padding: .5em .8em;
    margin: 0 0 4px;
    font-size: 16px;
}