:root {

    /* ==========================================
       REISEKLANG DESIGN SYSTEM
       ========================================== */

    /* Hintergrund */
    --background: #F1EDEB;

    /* Text */
    --text: #2F2F2F;

    /* Markenfarben */
    --reiseklang: #8197B9;
    --eigenklang: #8C6BAE;
/* Schriften */

    --font-heading: "Cormorant Garamond", serif;

    --font-text: "Inter", sans-serif;
    /* Flächen */
    --light: #E6E0DC;

}

body {
    margin: 0;
    padding: 0;

    font-family: var(--font-text);

    background: var(--background);

    color: var(--text);
}


.startseite {

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 30px;

}

.logo {

    width: 420px;

    margin-bottom: 30px;

}

h1 {

    font-family: var(--font-heading);

    font-size: 4.2rem;

    font-weight: 500;

    margin-bottom: 20px;

}


p {

    line-height: 1.6;

    font-size: 1.25rem;

max-width: 700px;

margin-top: 0;


}

button {

    margin-top: 40px;

    padding: 13px 28px;
    
    font-family: var(--font-text);

    font-size: 1.1rem;

    font-weight: 500;

    color: white;

background: rgba(129,151,185,0.08);
border: none;

backdrop-filter: none;

border-radius: 999px;

box-shadow:
0 8px 18px rgba(0,0,0,0.10);

}

button:hover {

    background: #7388AA;

    transform: translateY(-2px);

}

.logo-animation {

    animation: logo 2s ease forwards;

}

.titel {

    opacity: 0;

    animation: erscheinen 2s ease forwards;

    animation-delay: 1.8s;

}

.untertitel {

    opacity: 0;

    animation: erscheinen 2s ease forwards;

    animation-delay: 3.6s;

}

.start-button {

    opacity: 0;

    animation: erscheinen 2s ease forwards;

    animation-delay: 5.2s;

}
@keyframes logo {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes erscheinen {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}
/* ==========================================
   SZENEN
   ========================================== */

.szene {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    overflow: hidden;
}

/* Kompasslichtung */

.kompasslichtung {

    display: none;

    position: relative;

    background-image:
        linear-gradient(
            rgba(25,30,20,0.08),
            rgba(25,30,20,0.18)
        ),
        url("kompasslichtung-hintergrund.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}
.kompasslichtung::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(255, 244, 190, 0.65) 0%,
            rgba(255, 235, 170, 0.30) 25%,
            transparent 58%
        );

    opacity: 0.35;

    animation: sonnenlicht 5s ease-in-out infinite;

    pointer-events: none;

    z-index: 0;

}

.kompasslichtung.ist-sichtbar {

    display: flex;

    justify-content: center;

    align-items: center;

    animation:
        szeneEinblenden 2.5s ease forwards,
        lichtungAtmet 25s ease-in-out infinite;

}

.lichtung-inhalt {

    position: absolute;

    inset: 0;

    z-index: 3;

    width: 100%;

    height: 100%;

    color: white;

    pointer-events: none;

}

.lichtung-text {

    position: absolute;

    top: 29%;

    left: 39%;

    width: 32%;

    margin: 0;

    font-family: var(--font-heading);

    font-size: clamp(2rem, 3.1vw, 3.25rem);

    line-height: 1.15;

    text-align: center;

    color: rgba(255, 255, 255, 0.96);

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(255, 245, 215, 0.12);

    opacity: 0;

    animation: erscheinen 3s ease 4.5s forwards;

}

.lichtung-weiter {

    position: absolute;

    inset: 0;

    margin: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}
.lichtung-einladung {

    position: absolute;

    top: 56%;

    right: 11%;

    width: 24%;

    margin: 0;

    font-family: var(--font-heading);

    font-size: clamp(1.45rem, 2vw, 2.15rem);

    line-height: 1.35;

    text-align: center;

    color: rgba(255, 255, 255, 0.72);

    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.25),
        0 2px 12px rgba(20, 25, 15, 0.38);

    opacity: 1;

    visibility: visible;

    animation: none;

}


.kompass-button {

    position: absolute;

    top: 79%;

    left: 39%;

    right: auto;

    transform: translateX(-50%);

    margin: 0;

    padding: 16px 42px;

    font-size: 1rem;

    opacity: 0;

    visibility: hidden;

    pointer-events: auto;

    animation: kompassButtonErscheinen 2s ease 11.5s forwards;

}

@keyframes szeneEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes weiterErscheinen {

    from {

        opacity: 0;
        visibility: hidden;

        transform: translateY(15px);

    }

    to {

        opacity: 1;
        visibility: visible;

        transform: translateY(0);

    }

}
@keyframes lichtungAtmet {

    0% {

        background-size: 100%;

    }

    50% {

        background-size: 101.5%;

    }

    100% {

        background-size: 100%;

    }
}
@keyframes sonnenlicht {

    0% {

        opacity: 0.35;

    }

    50% {

        opacity: 0.95;

    }

    100% {

        opacity: 0.35;

    }

}/* ==========================================
   LICHTPARTIKEL
   ========================================== */

/* ==========================================
   LICHTPARTIKEL
   ========================================== */

.licht-partikel {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

}

.licht-partikel span {

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: rgba(255, 245, 215, 0.85);

    box-shadow: 0 0 7px rgba(255, 240, 190, 0.6);

    filter: blur(0.4px);

    opacity: 0;

    animation-name: partikelSchweben;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;

}


/* Partikel 1 */

.licht-partikel span:nth-child(1) {

    top: 16%;

    left: 73%;

    width: 3px;

    height: 3px;

    animation-duration: 12s;

    animation-delay: -4s;

}


/* Partikel 2 */

.licht-partikel span:nth-child(2) {

    top: 24%;

    left: 80%;

    width: 5px;

    height: 5px;

    animation-duration: 16s;

    animation-delay: -12s;

}


/* Partikel 3 */

.licht-partikel span:nth-child(3) {

    top: 34%;

    left: 76%;

    width: 3px;

    height: 3px;

    animation-duration: 14s;

    animation-delay: -8s;

}


/* Partikel 4 */

.licht-partikel span:nth-child(4) {

    top: 42%;

    left: 84%;

    width: 4px;

    height: 4px;

    animation-duration: 12.5s;

    animation-delay: -17s;

}


/* Partikel 5 */

.licht-partikel span:nth-child(5) {

    top: 28%;

    left: 69%;

    width: 2px;

    height: 2px;

    animation-duration: 13s;

    animation-delay: -6s;

}


/* Partikel 6 */

.licht-partikel span:nth-child(6) {

    top: 48%;

    left: 78%;

    width: 5px;

    height: 5px;

    animation-duration: 19s;

    animation-delay: -20s;

}


/* Partikel 7 */

.licht-partikel span:nth-child(7) {

    top: 20%;

    left: 87%;

    width: 3px;

    height: 3px;

    animation-duration: 15s;

    animation-delay: -10s;

}


/* Partikel 8 */

.licht-partikel span:nth-child(8) {

    top: 38%;

    left: 71%;

    width: 4px;

    height: 4px;

    animation-duration: 17s;

    animation-delay: -15s;

}


/* Partikel 9 */

.licht-partikel span:nth-child(9) {

    top: 52%;

    left: 82%;

    width: 2px;

    height: 2px;

    animation-duration: 18s;

    animation-delay: -3s;

}


/* Partikel 10 */

.licht-partikel span:nth-child(10) {

    top: 31%;

    left: 89%;

    width: 4px;

    height: 4px;

    animation-duration: 20s;

    animation-delay: -23s;

}

@keyframes partikelSchweben {

    0% {

        transform:
            translateX(0)
            translateY(0)
            scale(0.7);

        opacity: 0;

    }

    15% {

        opacity: 0.7;

    }

    35% {

        transform:
            translateX(19px)
            translateY(-16px)
            scale(1);

        opacity: 0.9;

    }

    55% {

        transform:
            translateX(-15px)
            translateY(-34px)
            scale(0.85);

        opacity: 0.55;

    }

    75% {

        transform:
            translateX(25px)
            translateY(-52px)
            scale(1.1);

        opacity: 0.8;

    }

    100% {

        transform:
            translateX(-10px)
            translateY(-76px)
            scale(0.75);

        opacity: 0;

    }

}/* ==========================================
   KOMPASS
   ========================================== */

.kompass {

    position: absolute;

   width: 195px;
    left: 25%;
top: 83%;
transform: translate(-50%, -50%) rotate(-38deg);
transform-origin: 50% 90%;

    z-index: 2;

    pointer-events: none;

   filter:
    drop-shadow(2px 7px 7px rgba(20,15,10,0.28))
    drop-shadow(0 2px 3px rgba(255,235,170,0.05));
}

.lichtung-weiter .lichtung-einladung {

    position: absolute;

    top: calc(54% + 180px);

    right: 10%;

    width: 28%;

    margin: 0;

    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 2vw, 2.1rem);

    line-height: 1.35;

    text-align: center;

    color: rgba(255, 255, 255, 0.72);

    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.25),
        0 2px 12px rgba(20, 25, 15, 0.38);

    opacity: 0;

    visibility: hidden;

    animation: milchigErscheinen 3s ease 9.5s forwards;

}

@keyframes milchigErscheinen {

    from {

        opacity: 0;

        visibility: hidden;

        transform: translateY(12px);

        filter: blur(5px);

    }

    to {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        filter: blur(0);

    }

}
/* Kompasslichtung: Feinschliff und responsive Positionen */
.kompasslichtung.ist-sichtbar .kompass-button {
    transform: translateX(-50%);
}
@media (max-width: 700px) {
    .lichtung-weiter .lichtung-einladung {
        top: 67%;
        right: 5%;
        width: 55%;
    }
    .kompass-button {
        top: 83%;
        left: 57%;
        padding: 12px 20px;
        font-size: 0.85rem;
    }
}

@keyframes kompassButtonErscheinen {
    from { opacity: 0; visibility: hidden; transform: translate(-50%, 15px); }
    to { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}

/* Szenenbezogene Buttonfarbe: Kompasslichtung */
.kompasslichtung .kompass-button {
    background: rgba(49, 82, 58, 0.48);
    border: 1px solid rgba(231, 239, 220, 0.36);
    color: #fff;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 5px 18px rgba(15, 35, 20, 0.22);
    cursor: pointer;
    transition: background-color 250ms ease, box-shadow 250ms ease;
}
.kompasslichtung .kompass-button:hover,
.kompasslichtung .kompass-button:focus-visible {
    background: rgba(49, 82, 58, 0.72);
    box-shadow: 0 6px 22px rgba(15, 35, 20, 0.32);
}

/* ==================================================
   ORT 2 – DER GEDANKENFLUSS (erste Fassung)
   ================================================== */
.gedankenfluss {
    display: none;
    background:
        linear-gradient(90deg, rgba(14,35,26,.38), rgba(14,35,26,.04) 70%),
        url("gedankenfluss-hintergrund.png") center / cover no-repeat,
        linear-gradient(140deg,#496c52,#8eac9b 50%,#6a9b9e);
    color: #fff;
    isolation: isolate;
}
.gedankenfluss.ist-sichtbar { display: block; animation: szeneEinblenden 2.2s ease both; }
.gedankenfluss::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 60% 55%,rgba(255,248,206,.14),transparent 58%);
    animation: flussLicht 12s ease-in-out infinite alternate;
}
.fluss-schimmer {
    position:absolute; left:27%; top:52%; width:68%; height:35%;
    background: repeating-linear-gradient(165deg,transparent 0 27px,rgba(245,252,238,.11) 30px,transparent 38px);
    opacity:.45; mix-blend-mode:screen; filter:blur(6px);
    transform:skewY(-7deg); animation: wasserSchimmer 15s linear infinite;
    pointer-events:none;
}
.fluss-inhalt { position:relative; z-index:3; height:100%; pointer-events:none; }
.fluss-ort {
    position:absolute; top:5%; left:6%; font-family:var(--font-heading);
    font-size:clamp(1.2rem,2vw,1.8rem); letter-spacing:.08em;
    text-shadow:0 2px 12px #14291e;
}
.fluss-dialog {
    position:absolute; top:18%; left:6%; width:min(430px,82vw);
    padding:clamp(18px,2.5vw,30px); border-radius:22px;
    background:rgba(19,47,36,.48); border:1px solid rgba(255,255,255,.26);
    box-shadow:0 16px 50px rgba(12,32,25,.18);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    pointer-events:auto; animation:flussDialog 1.8s ease 1s both;
}
.fluss-dialog p { font-size:clamp(.92rem,1.2vw,1.05rem); line-height:1.65; margin:0 0 14px; }
.fluss-dialog .fluss-einstieg {
    font-family:var(--font-heading); font-size:clamp(1.45rem,2.3vw,2rem); line-height:1.2;
}
.fluss-dialog label { display:block; font-family:var(--font-heading); font-size:1.55rem; margin:22px 0 12px; }
.fluss-eingabe { display:flex; flex-wrap:wrap; gap:10px; }
.fluss-eingabe input {
    flex:1 1 190px; min-width:0; border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.88); color:#213b2b;
    border-radius:12px; padding:12px; font:inherit;
}
.fluss-eingabe button {
    margin:0; padding:11px 17px; font-size:.88rem; cursor:pointer;
    background:rgba(69,107,82,.83); border:1px solid rgba(255,255,255,.38);
}
.fluss-eingabe button:hover { background:rgba(43,86,59,.95); transform:none; }
.fluss-dialog .fluss-hinweis { opacity:.8; font-size:.78rem; margin:12px 0 0; }
.gedanken-blaetter { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.gedanken-blatt {
    position:absolute; bottom:15%; left:47%; max-width:210px;
    padding:14px 21px; color:#28442e; font:500 .95rem var(--font-heading);
    font-size:1.1rem; overflow-wrap:anywhere; text-align:center;
    background:rgba(215,234,173,.93); border-radius:10% 75% 14% 70%;
    box-shadow:0 4px 12px rgba(20,40,25,.3);
    animation:gedankeTreiben 18s ease-in-out forwards;
}
.fluss-blatt { position:absolute; left:60%; bottom:16%; z-index:2; font-size:25px; animation:blattTreiben 21s linear infinite; pointer-events:none; }
.fluss-libelle {
    position:absolute; z-index:2; width:12px; height:29px;
    background:rgba(49,91,99,.7); border-radius:60%; transform:rotate(35deg);
    filter:drop-shadow(0 0 4px rgba(240,255,255,.55)); pointer-events:none;
}
.fluss-libelle::before,.fluss-libelle::after {
    content:""; position:absolute; top:4px; width:28px; height:11px;
    border-radius:85% 20%; background:rgba(222,244,245,.53);
}
.fluss-libelle::before { right:8px; transform:rotate(-25deg); }
.fluss-libelle::after { left:8px; transform:rotate(25deg); }
.libelle-eins { top:30%; left:68%; animation:libelleSchweben 15s ease-in-out infinite; }
.libelle-zwei { top:43%; left:82%; animation:libelleSchweben 19s ease-in-out -7s infinite reverse; }
@keyframes flussLicht { from {opacity:.45} to {opacity:1} }
@keyframes wasserSchimmer { from {transform:translateX(-7%) skewY(-7deg)} to {transform:translateX(9%) skewY(-7deg)} }
@keyframes flussDialog { from {opacity:0;transform:translateY(16px)} to {opacity:1;transform:translateY(0)} }
@keyframes blattTreiben { 0% {transform:translate(0,0) rotate(-12deg);opacity:0} 12% {opacity:.9} 85% {opacity:.9} 100% {transform:translate(27vw,12vh) rotate(50deg);opacity:0} }
@keyframes gedankeTreiben { 0% {transform:translate(0,0) rotate(-18deg);opacity:0} 12% {opacity:1} 82% {opacity:1} 100% {transform:translate(38vw,12vh) rotate(25deg);opacity:0} }
@keyframes libelleSchweben { 0%,100% {transform:translate(0,0) rotate(35deg)} 35% {transform:translate(-40px,16px) rotate(12deg)} 65% {transform:translate(15px,-18px) rotate(45deg)} }
@media (max-width:700px) {
    .fluss-ort {top:3%;}
    .fluss-dialog {top:13%; left:4%; width:calc(92% - 36px); padding:18px;}
    .fluss-dialog p {font-size:.91rem}
    .fluss-dialog label {font-size:1.35rem}
    .gedanken-blatt {left:25%;bottom:9%}
}
@media (prefers-reduced-motion:reduce) {
    .fluss-schimmer,.fluss-libelle,.fluss-blatt,.gedanken-blatt {animation:none}
    .gedankenfluss.ist-sichtbar,.fluss-dialog {animation:none}
}

/* Gedankenfluss – natürliche, ruhige zweite Fassung */
.gedankenfluss .fluss-dialog {
    background: rgba(35, 64, 43, 0.64);
    border-color: rgba(211, 226, 199, 0.34);
    box-shadow: 0 16px 42px rgba(13, 31, 20, 0.20);
}
.gedankenfluss .gedanken-blatt {
    left: 48%;
    bottom: 19%;
    width: max-content;
    max-width: min(170px, 38vw);
    min-width: 75px;
    padding: 12px 17px;
    border-radius: 8% 78% 10% 80% / 12% 76% 15% 73%;
    background: linear-gradient(130deg, rgba(148, 174, 106, .94), rgba(188, 205, 143, .96) 48%, rgba(123, 157, 91, .95));
    color: #263d27;
    font-family: var(--font-heading);
    font-size: clamp(.88rem, 1.3vw, 1.04rem);
    font-weight: 600;
    line-height: 1.18;
    border: 1px solid rgba(73, 107, 60, .26);
    box-shadow: inset 2px 2px 9px rgba(243, 251, 215, .18), 0 3px 9px rgba(18, 38, 23, .17);
    transform-origin: 25% 75%;
    animation: gedankeNatuerlichTreiben 22s ease-in-out forwards;
}
@keyframes gedankeNatuerlichTreiben {
    0% { transform: translate(0, 0) rotate(-24deg) scale(.94); opacity: 0; }
    12% { opacity: .96; }
    45% { transform: translate(13vw, 3vh) rotate(-7deg) scale(1); opacity: .96; }
    80% { opacity: .92; }
    100% { transform: translate(35vw, 11vh) rotate(20deg) scale(.96); opacity: 0; }
}
@media (max-width:700px) {
    .gedankenfluss .gedanken-blatt { left: 27%; bottom: 10%; max-width: 150px; }
}
@media (prefers-reduced-motion:reduce) {
    .gedankenfluss .gedanken-blatt { animation: none; }
}