/*
===============================================================================
Project Matthew – Der magische Ort
Datei: matthews-place.css
Aufgabe: Matthews Ort vollständig im Browserfenster darstellen
===============================================================================
*/

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;

    background: #000;
}

/* ==========================================================
   Hauptszene
========================================================== */

.matthews-place {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
}

/* ==========================================================
   Feste Bild-Koordinatenbühne

   Originalbild:
   3840 × 2161

   Diese Bühne verhält sich wie object-fit: cover,
   aber Bild, Hotspots und Aufmerksamkeiten bleiben
   fest miteinander verbunden.
========================================================== */

.matthews-stage {
    position: absolute;

    left: 50%;
    top: 50%;

    width:
        max(
            100vw,
            calc(100vh * 3840 / 2161)
        );

    height:
        max(
            100vh,
            calc(100vw * 2161 / 3840)
        );

    transform:
        translate(-50%, -50%);

    transform-origin:
        center center;

    transition:
        transform .8s ease,
        filter .8s ease;
}

/* Hintergrund füllt exakt die Bühne */

.matthews-place__image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;
}

/* ==========================================================
   Hotspots – gemeinsame Basis
========================================================== */

.hotspot {
    position: absolute;

    display: block;

    z-index: 20;

    cursor: pointer;

    background: transparent;

    border-radius: 8px;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.hotspot:hover {
    background: rgba(255, 220, 120, .10);

    box-shadow:
        0 0 18px rgba(255, 220, 120, .45);

    transform: scale(1.02);
}

/* ==========================================================
   Sprachwahl
========================================================== */

/* English */

.hotspot--en {
    left: 9.2%;
    top: 31.9%;
	
    width: 8.6%;
    height: 6.3%;
}

/* Deutsch */

.hotspot--de {
    left: 9.2%;
    top: 44.2%;

    width: 9.1%;
    height: 6.3%;
}

/* ==========================================================
   Grab
========================================================== */

.hotspot--grave {
    left: 47.5%;
    top: 42%;

    width: 15%;
    height: 17%;

    border: 0;
    padding: 0;

    font: inherit;
}

/* ==========================================================
   Gästebuch
========================================================== */

.hotspot--guestbook {
    left: 74%;
    top: 67%;
    transform: rotate(10deg);

    width: 20%;
    height: 20%;
}


/* ==========================================================
   Holzschilder
========================================================== */

.hotspot--sign-1 {
    left: 80.7%;
    top: 11%;
    transform: rotate(-7deg);
	

    width: 12%;
    height: 6%;
}

.hotspot--sign-2 {
    left: 80.3%;
    top: 21.0%;
    transform: rotate(-5deg);

    width: 12.5%;
    height: 6%;
}

.hotspot--sign-3 {
    left: 81%;
    top: 32.5%;
    transform: rotate(-3deg);

    width: 12%;
    height: 6%;
}

.hotspot--sign-4 {
    left: 81%;
    top: 43%;

    width: 12%;
    height: 6%;
}


/* ==========================================================
   Universelles Matthew Overlay
========================================================== */

/*
|--------------------------------------------------------------------------
| Hintergrund beim geöffneten Overlay
|--------------------------------------------------------------------------
*/

.matthews-place.is-overlay-open .matthews-stage {
    transform:
        translate(-50%, -50%)
        scale(1.035);

    filter: brightness(.78);
}

/*
|--------------------------------------------------------------------------
| Overlay-Grundfläche
|--------------------------------------------------------------------------
*/

.matthew-overlay {
    position: absolute;

    left: 50%;
    bottom: 5%;

    width: min(90vw, 760px);

    z-index: 100;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 30px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Sichtbarer Zustand
|--------------------------------------------------------------------------
*/

.matthews-place.is-overlay-open .matthew-overlay {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);

    pointer-events: auto;
}

/*
|--------------------------------------------------------------------------
| Overlay-Inhaltsfläche
|--------------------------------------------------------------------------
*/

.matthew-overlay__content {
    position: relative;

    padding:
        26px
        34px
        28px;

    border:
        1px solid
        rgba(255, 255, 255, .38);

    border-radius: 14px;

    background:
        rgba(26, 31, 22, .82);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .32);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    color: #fff;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Kleine Einleitung
|--------------------------------------------------------------------------
*/

.matthew-overlay__eyebrow {
    margin:
        0
        0
        8px;

    font-size: 15px;

    letter-spacing: .04em;

    opacity: .82;
}

/*
|--------------------------------------------------------------------------
| Überschrift
|--------------------------------------------------------------------------
*/

.matthew-overlay__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            24px,
            3vw,
            36px
        );

    font-weight: 400;

    line-height: 1.2;
}

/*
|--------------------------------------------------------------------------
| Beschreibung
|--------------------------------------------------------------------------
*/

.matthew-overlay__text {
    margin:
        12px
        0
        0;

    font-size: 16px;

    line-height: 1.5;

    opacity: .86;
}

/*
|--------------------------------------------------------------------------
| Schließen
|--------------------------------------------------------------------------
*/

.matthew-overlay__close {
    position: absolute;

    top: 10px;
    right: 14px;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    opacity: .7;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.matthew-overlay__close:hover {
    opacity: 1;

    transform: scale(1.05);
}

.matthew-overlay__close:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, .9);

    outline-offset: 3px;
}

/* ==========================================================
   Entwicklerhilfe – Hotspots sichtbar machen
========================================================== */

.hotspot-debug__checkbox {
    position: fixed;

    opacity: 0;

    pointer-events: none;
}

.hotspot-debug__button {
    position: fixed;

    top: 15px;
    right: 15px;

    z-index: 1000;

    padding:
        10px
        16px;

    background:
        rgba(0, 0, 0, .8);

    color: #fff;

    border:
        1px solid
        rgba(255, 255, 255, .7);

    border-radius: 6px;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;

    cursor: pointer;

    user-select: none;
}

/*
|--------------------------------------------------------------------------
| Hotspots im Debug-Modus
|--------------------------------------------------------------------------
*/

.hotspot-debug__checkbox:checked
~ .matthews-stage
.hotspot {
    background:
        rgba(255, 0, 0, .30)
        !important;

    outline:
        3px solid red
        !important;
}

/*
|--------------------------------------------------------------------------
| Debug-Schalter aktiv
|--------------------------------------------------------------------------
*/

.hotspot-debug__checkbox:checked
+ .hotspot-debug__button {
    background:
        rgba(120, 0, 0, .9);
}

.hotspot-debug__checkbox:checked
+ .hotspot-debug__button::after {
    content: " ✓";
}

/* ==========================================================
   Kleine Bildschirme
========================================================== */

@media (max-width: 768px) {

    .matthew-overlay {
        bottom: 3%;

        width: 94vw;
    }

    .matthew-overlay__content {
        padding:
            24px
            48px
            24px;
    }

    .matthew-overlay__title {
        font-size:
            clamp(
                22px,
                6vw,
                30px
            );
    }

    .matthew-overlay__text {
        font-size: 15px;
    }

}

/* ==========================================================
   Sehr kleine Bildschirme
========================================================== */

@media (max-width: 480px) {

    .matthew-overlay {
        bottom: 2%;

        width: 96vw;
    }

    .matthew-overlay__content {
        padding:
            22px
            42px
            22px;
    }

    .matthew-overlay__eyebrow {
        font-size: 14px;
    }

    .matthew-overlay__title {
        font-size: 24px;
    }

    .matthew-overlay__text {
        font-size: 14px;
    }

    .matthew-overlay__close {
        top: 8px;
        right: 10px;
    }

}
/* ==========================================================
   Aufmerksamkeiten im Matthew Overlay
========================================================== */

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

.tribute-picker {
    margin-top: 18px;
}

.tribute-picker__form,
.tribute-picker__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.tribute-picker__items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.tribute-choice {
    min-width: 0;
    cursor: pointer;
}

.tribute-choice__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tribute-choice__card {
    display: flex;
    min-height: 210px;
    height: 100%;
    padding: 12px 7px 11px;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.tribute-choice:hover .tribute-choice__card {
    transform: translateY(-2px);
    border-color: rgba(255, 225, 160, .55);
    background: rgba(255, 255, 255, .09);
}

.tribute-choice__input:checked + .tribute-choice__card {
    transform: translateY(-2px);
    border-color: rgba(255, 224, 150, .9);
    background: rgba(255, 224, 150, .12);
    box-shadow: 0 0 22px rgba(255, 220, 145, .20);
}

.tribute-choice__input:focus-visible + .tribute-choice__card {
    outline: 2px solid rgba(255, 255, 255, .95);
    outline-offset: 3px;
}

/* Einheitliche Bildfläche: Größe verändert nur das Symbol, nicht die Karte */

.tribute-choice__image-wrap {
    display: grid;
    width: 84px;
    height: 84px;
    margin-bottom: 8px;
    place-items: center;
}

.tribute-choice__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tribute-choice__image-wrap--small .tribute-choice__image {
    width: 68%;
    height: 68%;
}

.tribute-choice__image-wrap--medium .tribute-choice__image {
    width: 100%;
    height: 100%;
}

.tribute-choice__image-wrap--large .tribute-choice__image {
    width: 112%;
    height: 112%;
}

.tribute-choice__name {
    display: block;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
}

.tribute-choice__description {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.3;
    opacity: .72;
}

.tribute-choice__duration {
    display: block;
    margin-top: auto;
    padding-top: 8px;
    font-size: 11px;
    opacity: .58;
}

.tribute-picker__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 39px;
    padding: 10px 22px;
    border: 1px solid rgba(255, 229, 170, .65);
    border-radius: 999px;
    background: rgba(255, 229, 170, .12);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.tribute-picker__submit:hover {
    transform: translateY(-1px);
    background: rgba(255, 229, 170, .20);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.tribute-message {
    margin: 16px 0 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.4;
}

.tribute-message--success {
    background: rgba(118, 169, 117, .18);
}

.tribute-message--notice {
    background: rgba(196, 164, 92, .18);
}

.tribute-message--error {
    background: rgba(185, 91, 91, .20);
}

.tribute-picker__empty {
    margin: 18px 0 0;
}

@media (max-width: 900px) {
    .matthew-overlay {
        width: min(94vw, 760px);
    }

    .tribute-picker__items {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
        overflow-x: auto;
        padding: 3px 2px 10px;
    }
}

@media (max-width: 600px) {
    .matthew-overlay__content {
        max-height: 88vh;
        overflow-y: auto;
    }

    .tribute-picker__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
    }

    .tribute-choice__card {
        min-height: 178px;
    }

    .tribute-choice__image-wrap {
        width: 74px;
        height: 74px;
    }
}

/* ==========================================================
   Sichtbare Aufmerksamkeiten vor Matthews Grab
========================================================== */

.grave-tributes {
    position: absolute;

    left: 40%;
    top: 52%;

    width: 30%;
    height: 24%;

    z-index: 10;

    pointer-events: none;
}

/* ==========================================================
   Einzelne Aufmerksamkeit
========================================================== */

.grave-tribute {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    transform-origin:
        center bottom;

    pointer-events: none;
}

.grave-tribute__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(0, 0, 0, .28)
        );
}

/* ==========================================================
   Neutrale Größen
========================================================== */

.grave-tribute--general {
    width: 21%;
    height: 50%;
}

.grave-tribute--angel {
    width: 18%;
    height: 35%;
}

/* ==========================================================
   Darstellungsgrößen der Aufmerksamkeiten
========================================================== */

.grave-tribute--general.grave-size--small {
    width: 13%;
    height: 32%;
}

.grave-tribute--general.grave-size--medium {
    width: 21%;
    height: 50%;
}

.grave-tribute--general.grave-size--large {
    width: 27%;
    height: 62%;
}

/* ==========================================================
   12 neutrale Grabplätze
========================================================== */

.grave-position-01 { left: -24%; top: 68%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-02 { left:  54%; top: 98%; transform: translate(-50%, -180%) rotate(-0deg); }
.grave-position-03 { left:  28%; top: 33%; transform: translate(-50%, -50%) rotate(-4deg); }
.grave-position-04 { left:  10%; top: 54%; transform: translate(-50%, -50%) rotate(0deg); }
.grave-position-05 { left:  70%; top: 39%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-06 { left:  42%; top: 42%; transform: translate(-50%, -50%) rotate(-0deg); }

.grave-position-07 { left: 60%; top: 35%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-08 { left: 90%; top: 126%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-09 { left: 32%; top: 43%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-10 { left: 54%; top: 44%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-11 { left: 88%; top: 53%; transform: translate(-50%, -50%) rotate(-0deg); }
.grave-position-12 { left: 9%; top: 32%; transform: translate(-50%, -50%) rotate(-0deg); }




/* ==========================================================
   3 feste Engelplätze am Grabstein
========================================================== */

.angel-position-01 {
    left: 49%;
    top: 27%;

    transform:
        translate(-50%, -50%)
        scale(0.80);
}

.angel-position-02 {
    left: 78%;
    top: 42%;
}

.angel-position-03 {
    left: 18%;
    top: 41%;
}

/* ==========================================================
   Matthews Gästebuch – aufgeschlagenes Erinnerungsbuch
========================================================== */

/*
|--------------------------------------------------------------------------
| Gästebuch-Overlay etwas breiter als Aufmerksamkeiten
|--------------------------------------------------------------------------
*/

.matthew-overlay[data-active-overlay="guestbook"] {
    width: min(94vw, 1080px);
}


/* ==========================================================
   Matthew-Overlay
========================================================== */

.matthew-overlay[data-active-overlay="matthew"] {
    width: min(92vw, 920px);
    bottom: 4%;
}

.matthew-overlay[data-active-overlay="matthew"]
.matthew-overlay__content {
    max-height: 82vh;
    overflow-y: auto;
}

/*
|--------------------------------------------------------------------------
| Äußere Buchfläche
|--------------------------------------------------------------------------
*/

.guestbook-book {
    margin-top: 22px;

    color: #342b21;

    text-align: left;
}


/*
|--------------------------------------------------------------------------
| Zwei aufgeschlagene Buchseiten
|--------------------------------------------------------------------------
*/

.guestbook-book__pages {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    min-height: 440px;

    border-radius:
        18px
        18px
        16px
        16px;

    background:
        #d8c7a2;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .34),
        0 3px 8px rgba(0, 0, 0, .22);

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Einzelne Buchseite
|--------------------------------------------------------------------------
*/

.guestbook-page {
    position: relative;

    min-width: 0;

    background:
        linear-gradient(
            90deg,
            #e5d6b5 0%,
            #f0e4c8 18%,
            #f5ead0 55%,
            #e8d8b7 100%
        );
}


/*
|--------------------------------------------------------------------------
| Linke Seite
|--------------------------------------------------------------------------
*/

.guestbook-page--left {
    border-radius:
        16px
        0
        0
        16px;

    background:
        linear-gradient(
            90deg,
            #dfcda8 0%,
            #f1e4c6 16%,
            #f5ead0 70%,
            #d9c49e 100%
        );
}


/*
|--------------------------------------------------------------------------
| Rechte Seite
|--------------------------------------------------------------------------
*/

.guestbook-page--right {
    border-radius:
        0
        16px
        16px
        0;

    background:
        linear-gradient(
            90deg,
            #d5c096 0%,
            #f4e8cb 14%,
            #f1e4c7 78%,
            #ddcaa5 100%
        );
}


/*
|--------------------------------------------------------------------------
| Leichte Papierstruktur
|--------------------------------------------------------------------------
*/

.guestbook-page::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(112, 82, 46, .18) 0 1px,
            transparent 1.5px
        );

    background-size:
        17px
        17px;
}


/*
|--------------------------------------------------------------------------
| Innenabstand
|--------------------------------------------------------------------------
*/

.guestbook-page__inner {
    position: relative;

    z-index: 2;

    padding:
        34px
        38px
        36px;
}


/*
|--------------------------------------------------------------------------
| Buchfalz
|--------------------------------------------------------------------------
*/

.guestbook-book__spine {
    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    z-index: 5;

    width: 34px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(76, 54, 31, .10) 20%,
            rgba(62, 42, 23, .24) 48%,
            rgba(255, 255, 255, .18) 53%,
            rgba(78, 55, 31, .10) 78%,
            transparent 100%
        );
}


/*
|--------------------------------------------------------------------------
| Kleine Überschrift
|--------------------------------------------------------------------------
*/

.guestbook-page__eyebrow {
    margin:
        0
        0
        7px;

    color: #756044;

    font-size: 13px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Seitenüberschrift
|--------------------------------------------------------------------------
*/

.guestbook-page__title {
    margin:
        0
        0
        18px;

    color: #3c3023;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            22px,
            2vw,
            29px
        );

    font-weight: 400;

    line-height: 1.2;
}


/*
|--------------------------------------------------------------------------
| Einleitung rechte Seite
|--------------------------------------------------------------------------
*/

.guestbook-page__intro {
    margin:
        -4px
        0
        22px;

    color: #62513d;

    font-size: 14px;

    line-height: 1.55;
}


/* ==========================================================
   Vorhandene Gästebucheinträge
========================================================== */

.guestbook-entries {
    max-height: 315px;

    padding-right: 8px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(94, 70, 43, .38)
        transparent;
}


.guestbook-entry {
    padding:
        0
        0
        18px;

    margin:
        0
        0
        18px;

    border-bottom:
        1px solid
        rgba(91, 67, 39, .18);
}


.guestbook-entry:last-child {
    margin-bottom: 0;

    border-bottom: 0;
}


.guestbook-entry__header {
    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap:
        4px
        12px;

    margin-bottom: 9px;
}


.guestbook-entry__name {
    color: #403326;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size: 18px;

    font-weight: 400;
}

.guestbook-entry__date {
    color: #89765c;

    font-size: 11px;
}


.guestbook-entry__message {
    margin: 0;

    color: #514231;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size: 17px;

    line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Noch keine Einträge
|--------------------------------------------------------------------------
*/

.guestbook-empty {
    padding:
        24px
        10px;

    color: #74634e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-style: italic;

    line-height: 1.6;

    text-align: center;
}


/* ==========================================================
   Gästebuch-Formular
========================================================== */

.guestbook-form {
    margin: 0;
}


.guestbook-form__field {
    margin-bottom: 18px;
}


.guestbook-form__label {
    display: block;

    margin-bottom: 7px;

    color: #4c3c2c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
}


.guestbook-form__optional {
    color: #8b765c;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 400;
}


/*
|--------------------------------------------------------------------------
| Eingabefelder
|--------------------------------------------------------------------------
*/

.guestbook-form__input,
.guestbook-form__textarea {
    box-sizing: border-box;

    display: block;

    width: 100%;

    border:
        0;

    border-bottom:
        1px solid
        rgba(82, 59, 34, .38);

    border-radius: 3px;

    outline: none;

    background:
        rgba(255, 252, 239, .46);

    color: #3f3225;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.guestbook-form__input {
    height: 39px;

    padding:
        7px
        10px;
}


.guestbook-form__textarea {
    min-height: 145px;

    padding:
        10px
        11px;

    resize: vertical;

    line-height: 1.5;
}


.guestbook-form__input:focus,
.guestbook-form__textarea:focus {
    border-color:
        rgba(89, 62, 31, .72);

    background:
        rgba(255, 253, 243, .72);

    box-shadow:
        0 0 0 2px
        rgba(114, 84, 47, .08);
}


/*
|--------------------------------------------------------------------------
| Zeichenhinweis
|--------------------------------------------------------------------------
*/

.guestbook-form__hint {
    margin:
        6px
        0
        0;

    color: #8a755b;

    font-size: 11px;

    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.guestbook-form__actions {
    margin-top: 22px;

    text-align: center;
}


.guestbook-form__submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        10px
        22px;

    border:
        1px solid
        rgba(83, 59, 34, .48);

    border-radius: 999px;

    background:
        rgba(91, 67, 40, .10);

    color: #443426;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.guestbook-form__submit:hover {
    transform:
        translateY(-1px);

    background:
        rgba(91, 67, 40, .17);

    box-shadow:
        0 6px 16px
        rgba(71, 50, 28, .12);
}


/*
|--------------------------------------------------------------------------
| Moderationshinweis
|--------------------------------------------------------------------------
*/

.guestbook-form__moderation {
    max-width: 360px;

    margin:
        16px
        auto
        0;

    color: #82705a;

    font-size: 11px;

    line-height: 1.45;

    text-align: center;
}


/* ==========================================================
   Meldungen
========================================================== */

.guestbook-message {
    margin:
        0
        0
        16px;

    padding:
        11px
        15px;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.45;

    text-align: center;
}


.guestbook-message p {
    margin:
        4px
        0
        0;
}


.guestbook-message--success {
    border:
        1px solid
        rgba(93, 122, 72, .35);

    background:
        rgba(226, 235, 211, .92);

    color: #435335;
}


.guestbook-message--error {
    border:
        1px solid
        rgba(143, 77, 67, .30);

    background:
        rgba(241, 220, 214, .94);

    color: #70463f;
}


.guestbook-message--error ul {
    margin:
        7px
        0
        0;

    padding-left: 20px;

    text-align: left;
}


/* ==========================================================
   Geschlossenes Gästebuch
========================================================== */

.guestbook-book__disabled {
    padding: 30px;

    border-radius: 12px;

    background:
        rgba(245, 234, 208, .95);

    color: #514231;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    text-align: center;
}


/* ==========================================================
   Gästebuch – Tablet
========================================================== */

@media (max-width: 900px) {

    .matthew-overlay[data-active-overlay="guestbook"] {
        width: 94vw;
    }

    .guestbook-page__inner {
        padding:
            28px
            26px
            30px;
    }

}


/* ==========================================================
   Gästebuch – Smartphone
========================================================== */

@media (max-width: 650px) {

    .guestbook-book {
        margin-top: 18px;
    }

    .guestbook-book__pages {
        display: block;

        max-height: 72vh;

        overflow-y: auto;

        border-radius: 14px;
    }

    .guestbook-page--left,
    .guestbook-page--right {
        border-radius: 0;
    }

    .guestbook-page--left {
        border-bottom:
            1px solid
            rgba(88, 63, 35, .28);
    }

    .guestbook-book__spine {
        display: none;
    }

    .guestbook-page__inner {
        padding:
            27px
            24px
            30px;
    }

    .guestbook-entries {
        max-height: 250px;
    }

}

/* ==========================================================
   Gästebuch – echtes Blättern
========================================================== */

/*
|--------------------------------------------------------------------------
| Keine Scrollliste mehr
|--------------------------------------------------------------------------
*/

.guestbook-entries {
    height: 315px;
    max-height: 315px;
    overflow: hidden;
    padding-right: 0;
}


/*
|--------------------------------------------------------------------------
| Einzelne Buchseiten werden per JavaScript geschaltet
|--------------------------------------------------------------------------
*/

.guestbook-entry[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Blätternavigation
|--------------------------------------------------------------------------
*/

.guestbook-pagination {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 38px;

    margin-top: 16px;

    padding:
        0
        6px;
}


/*
|--------------------------------------------------------------------------
| Pfeile
|--------------------------------------------------------------------------
*/

.guestbook-pagination__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 38px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #4f3b26;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    opacity: 1;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.guestbook-pagination__button:hover {
    opacity: 1;

    transform:
        scale(1.08);
}


.guestbook-pagination__button:disabled {
    cursor: default;

    opacity: .35;

    transform: none;
}

/*
|--------------------------------------------------------------------------
| Kleine Seitenanzeige – bewusst sehr zurückhaltend
|--------------------------------------------------------------------------
*/

.guestbook-pagination__status {
    color: #5d472f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    font-weight: 600;

    font-style: italic;

    letter-spacing: .04em;

    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .guestbook-pagination {
        margin-top: 12px;
    }

}

/* ==========================================================
   Matthew – persönliche Erinnerung
========================================================== */

.matthew-memory {
    max-width: 820px;

    margin:
        18px
        auto
        0;

    text-align: center;
}


/* ----------------------------------------------------------
   Einleitung
---------------------------------------------------------- */

.matthew-memory__intro {
    max-width: 690px;

    margin:
        0
        auto
        20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;
    font-style: italic;

    line-height: 1.55;

    color:
        rgba(255, 255, 255, .88);
}


/* ----------------------------------------------------------
   Lebensdaten
---------------------------------------------------------- */

.matthew-memory__facts {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px
        28px;

    max-width: 720px;

    margin:
        0
        auto
        20px;

    text-align: left;
}


.matthew-memory__facts p {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin: 0;

    padding:
        9px
        12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .14);
}


.matthew-memory__facts strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    font-weight: 400;

    letter-spacing: .07em;

    text-transform: uppercase;

    color:
        rgba(255, 225, 165, .82);
}


.matthew-memory__facts span {
    font-size: 14px;

    line-height: 1.4;

    color:
        rgba(255, 255, 255, .88);
}


/* ----------------------------------------------------------
   Ein Sohn. Ein Bruder. Ein Vater. Ein Held.
---------------------------------------------------------- */

.matthew-memory__legacy {
    margin:
        2px
        0
        20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.35;

    letter-spacing: .035em;

    color: #fff;
}


/* ----------------------------------------------------------
   Vier Bilder
---------------------------------------------------------- */

.matthew-memory__photos {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin:
        0
        auto
        20px;
}


.matthew-memory__photos img {
    display: block;

    width: 150px;
    height: 170px;

    border:
        1px solid
        rgba(255, 255, 255, .42);

    border-radius: 5px;

    object-fit: cover;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, .25);
}


/* ----------------------------------------------------------
   Bibelvers
---------------------------------------------------------- */

.matthew-memory__verse {
    max-width: 650px;

    margin:
        0
        auto;

    padding:
        16px
        24px
        0;

    border-top:
        1px solid
        rgba(255, 255, 255, .16);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        rgba(255, 255, 255, .82);
}


.matthew-memory__verse p {
    margin:
        0
        0
        5px;

    font-size: 15px;

    font-style: italic;

    line-height: 1.5;
}


.matthew-memory__verse cite {
    font-size: 12px;

    font-style: normal;

    letter-spacing: .06em;

    color:
        rgba(255, 225, 165, .72);
}


/* ==========================================================
   Wegweiser – Beschriftung
========================================================== */

.hotspot__sign-label {
    display: block;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Comic Sans MS",
        cursive;

    font-size: 28px;
    font-weight: 600;

    letter-spacing: .015em;

color: #e1c38e;

text-shadow:
    0 1px 1px rgba(30, 18, 8, .95),
    0 2px 3px rgba(0, 0, 0, .55);
	
    pointer-events: none;
}

/* ==========================================================
   Sprachwahl – sichtbare Beschriftung ohne Hotspot-Rahmen
========================================================== */

.hotspot--de,
.hotspot--en {
    display: flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    color: rgba(255, 255, 255, .92);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .55);

    transition:
        color .25s ease,
        text-shadow .25s ease;
}


/* Kein sichtbarer Hotspot beim Darüberfahren */

.hotspot--de:hover,
.hotspot--en:hover {
    background: transparent;

    box-shadow: none;

    transform: none;

    color: #fff;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .65),
        0 0 10px rgba(255, 255, 255, .25);
}


/* Auch beim Tastaturfokus kein Kasten */

.hotspot--de:focus,
.hotspot--en:focus,
.hotspot--de:focus-visible,
.hotspot--en:focus-visible {
    outline: none;

    background: transparent;

    box-shadow: none;
}

/* ==========================================================
   Holzschild 1 – Matthew
========================================================== */

.hotspot--sign-1 {
    border: 0;
    padding: 0;

    background: transparent;

    box-shadow: none;

    font: inherit;
}


/* Kein sichtbarer Hotspot beim Darüberfahren */

.hotspot--sign-1:hover {
    background: transparent;

    box-shadow: none;

    transform: rotate(-7deg);
}


/* Kein sichtbarer Fokusrahmen */

.hotspot--sign-1:focus,
.hotspot--sign-1:focus-visible {
    outline: none;

    background: transparent;

    box-shadow: none;
}

/* ==========================================================
   Erinnerungsbuch – Hotspot ohne sichtbaren Rahmen
========================================================== */

.hotspot--guestbook {
    border: 0;
    padding: 0;

    background: transparent;

    box-shadow: none;
}


/* Kein sichtbarer Hotspot beim Darüberfahren */

.hotspot--guestbook:hover {
    background: transparent;

    box-shadow: none;

    transform: rotate(10deg);
}


/* Kein sichtbarer Fokusrahmen */

.hotspot--guestbook:focus,
.hotspot--guestbook:focus-visible {
    outline: none;

    background: transparent;

    box-shadow: none;
}

/* ==========================================================
   Holzschild 2 – Über diesen Ort
========================================================== */

.hotspot--sign-2 {
    border: 0;
    padding: 0;

    background: transparent;

    box-shadow: none;

    font: inherit;
}

.hotspot--sign-2:hover {
    background: transparent;

    box-shadow: none;

    transform: rotate(-5deg);
}

.hotspot--sign-2:focus,
.hotspot--sign-2:focus-visible {
    outline: none;

    background: transparent;

    box-shadow: none;
}

/* ==========================================================
   Holzschild 2 – Anleitung / Über diesen Ort
========================================================== */

.matthew-overlay[data-active-overlay="place-info"] {
    width: min(90vw, 780px);
}


/* ----------------------------------------------------------
   Grundbereich
---------------------------------------------------------- */

.place-guide {
    max-width: 680px;

    margin:
        18px
        auto
        0;

    text-align: left;
}


/* ----------------------------------------------------------
   Einleitung
---------------------------------------------------------- */

.place-guide__intro {
    max-width: 610px;

    margin:
        0
        auto
        22px;

    color:
        rgba(255, 255, 255, .88);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;
    font-style: italic;

    line-height: 1.6;

    text-align: center;
}


/* ----------------------------------------------------------
   Einzelne Hinweise
---------------------------------------------------------- */

.place-guide__items {
    max-width: 620px;

    margin:
        0
        auto;
}


.place-guide__item {
    padding:
        12px
        4px
        13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .13);
}


.place-guide__item:first-child {
    border-top:
        1px solid
        rgba(255, 255, 255, .13);
}


.place-guide__item h3 {
    margin:
        0
        0
        5px;

    color:
        rgba(255, 225, 165, .88);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 400;

    letter-spacing: .025em;
}


.place-guide__item p {
    margin: 0;

    color:
        rgba(255, 255, 255, .82);

    font-size: 14px;

    line-height: 1.55;
}


/* ----------------------------------------------------------
   Ruhiger Abschluss
---------------------------------------------------------- */

.place-guide__closing {
    max-width: 610px;

    margin:
        22px
        auto
        0;

    color:
        rgba(255, 255, 255, .9);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
    font-style: italic;

    line-height: 1.6;

    text-align: center;
}

/* ==========================================================
   Holzschild 3 – Pierre
========================================================== */

.hotspot--sign-3 {
    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;
    padding: 0;

    background: transparent;

    box-shadow: none;

    font: inherit;

    text-decoration: none;
}


.hotspot--sign-3:hover {
    background: transparent;

    box-shadow: none;

    transform: rotate(-3deg);

    text-decoration: none;
}

.hotspot--sign-3:focus,
.hotspot--sign-3:focus-visible {
    outline: none;

    background: transparent;

    box-shadow: none;
}

/* ==========================================================
   Holzschild 4 – Widmung
========================================================== */

.hotspot--sign-4 {
    display: flex;

    align-items: center;
    justify-content: center;

    cursor: default;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    pointer-events: none;
}


.hotspot__sign-label--dedication {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    font-size: 14px;

    line-height: 1.15;

    letter-spacing: .015em;

    text-align: center;
}


.hotspot__sign-label--dedication span {
    font-size: 12px;

    font-weight: 400;
}


.hotspot__sign-label--dedication strong {
    font-size: 14px;

    font-weight: 600;
}

.hotspot__sign-label--dedication {
    color: #e1c38e;

    text-shadow:
        0 1px 1px rgba(30, 18, 8, .95),
        0 2px 3px rgba(0, 0, 0, .55);
}

.hotspot__sign-label--dedication span {
    font-size: 13px;
}

.hotspot__sign-label--dedication strong {
    font-size: 15px;
}

/* ==========================================================
   FINAL RESPONSIVE – TABLET QUERFORMAT
   Desktop oberhalb bleibt unangetastet
========================================================== */

@media
    (min-width: 769px)
    and (max-width: 1200px)
    and (orientation: landscape) {

    .matthews-stage {
        width: 100vw;
        height: auto;

        aspect-ratio: 3840 / 2161;
    }

    /* Wegweiser auf Tablet proportional zur kleineren Bühne */

    .hotspot__sign-label {
        font-size: 18px;
        line-height: 1.1;
    }

    .hotspot__sign-label--dedication {
        gap: 1px;
        line-height: 1.05;
    }

    .hotspot__sign-label--dedication span {
        font-size: 9px;
    }

    .hotspot__sign-label--dedication strong {
        font-size: 10px;
    }
	
	
	    .matthews-place::before {
        content: "";

        position: absolute;
        inset: 0;

        background:
            url("/assets/images/scenes/matthews-place.webp")
            center center / cover
            no-repeat;

        filter:
			blur(9px)
			brightness(.68);

		transform: scale(1.04);

		opacity: .95;

        z-index: 0;
    }

    .matthews-stage {
        z-index: 1;
    }
	
	    /* Aufmerksamkeiten auf Tablet etwas höher */

    .matthew-overlay[data-active-overlay="tributes"] {
        bottom: 19%;
    }
}

/* ==========================================================
   TABLET QUERFORMAT – Gästebuch an echte Browserhöhe anpassen
========================================================== */

@media
    (orientation: landscape)
    and (max-height: 820px) {

    .matthew-overlay[data-active-overlay="guestbook"] {
        top: 12px;
        bottom: 12px;

        height: auto;

        transform:
            translate(-50%, 0);
    }


    .matthews-place.is-overlay-open
    .matthew-overlay[data-active-overlay="guestbook"] {
        transform:
            translate(-50%, 0);
    }


    .matthew-overlay[data-active-overlay="guestbook"]
    .matthew-overlay__content {
        box-sizing: border-box;

        max-height:
            calc(100dvh - 24px);

        overflow-y: auto;
    }

}


/* ==========================================================
   FINAL RESPONSIVE – TABLET HOCHFORMAT
   Szene ausblenden, Dreh-Hinweis anzeigen
========================================================== */

/* Standard: Hinweis immer unsichtbar */

.orientation-notice {
    display: none;
}


/* Nur Tablet im Hochformat */

@media
    (min-width: 769px)
    and (max-width: 1200px)
    and (orientation: portrait) {

    .orientation-notice {
        position: fixed;

        inset: 0;

        z-index: 5000;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 32px;

        background:
            linear-gradient(
                rgba(18, 22, 16, .78),
                rgba(18, 22, 16, .88)
            ),
            url("/assets/images/scenes/matthews-place.webp")
            center center / cover
            no-repeat;

        color: #fff;

        text-align: center;
    }


    .orientation-notice__content {
        width: min(88vw, 520px);

        padding:
            34px
            30px
            32px;

        border:
            1px solid
            rgba(255, 255, 255, .28);

        border-radius: 16px;

        background:
            rgba(24, 29, 21, .78);

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, .32);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }


    .orientation-notice__icon {
        margin-bottom: 14px;

        font-size: 52px;
        line-height: 1;

        color: #e1c38e;
    }


    .orientation-notice__title {
        margin:
            0
            0
            14px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 30px;

        font-weight: 400;

        line-height: 1.2;
    }


    .orientation-notice__text {
        margin: 0;

        font-size: 16px;

        line-height: 1.65;

        color:
            rgba(255, 255, 255, .88);
    }


    /*
    |--------------------------------------------------------------------------
    | Im Hochformat bleibt die eigentliche Szene vollständig verborgen
    |--------------------------------------------------------------------------
    */

    .matthews-stage,
    .matthew-overlay,
    .hotspot-debug__button {
        visibility: hidden;
        pointer-events: none;
    }

}

/* ==========================================================
   FINAL RESPONSIVE – SMARTPHONE HOCHFORMAT
   Matthews Ort nur im Querformat anzeigen
========================================================== */

@media
    (max-width: 768px)
    and (orientation: portrait) {

    .orientation-notice {
        position: fixed;

        inset: 0;

        z-index: 5000;

        display: flex;

        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        padding: 22px;

        background:
            linear-gradient(
                rgba(18, 22, 16, .78),
                rgba(18, 22, 16, .88)
            ),
            url("/assets/images/scenes/matthews-place.webp")
            center center / cover
            no-repeat;

        color: #fff;

        text-align: center;
    }


    .orientation-notice__content {
        box-sizing: border-box;

        width: min(90vw, 430px);

        padding:
            28px
            22px
            26px;

        border:
            1px solid
            rgba(255, 255, 255, .28);

        border-radius: 14px;

        background:
            rgba(24, 29, 21, .78);

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, .32);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }


    .orientation-notice__icon {
        margin-bottom: 12px;

        font-size: 46px;
        line-height: 1;

        color: #e1c38e;
    }


    .orientation-notice__title {
        margin:
            0
            0
            12px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 26px;

        font-weight: 400;

        line-height: 1.2;
    }


    .orientation-notice__text {
        margin: 0;

        font-size: 15px;

        line-height: 1.55;

        color:
            rgba(255, 255, 255, .88);
    }


    .matthews-stage,
    .matthew-overlay,
    .hotspot-debug__button {
        visibility: hidden;

        pointer-events: none;
    }

}

/* ==========================================================
   FINAL RESPONSIVE – SMARTPHONE QUERFORMAT
   Wegweiser
========================================================== */

@media
    (max-width: 768px)
    and (orientation: landscape) {

    .hotspot__sign-label {
        font-size: 12px;
        line-height: 1.05;
    }

    .hotspot__sign-label--dedication {
        gap: 0;
        line-height: 1;
    }

    .hotspot__sign-label--dedication span {
        font-size: 6px;
    }

    .hotspot__sign-label--dedication strong {
        font-size: 7px;
    }

}

/* ==========================================================
   SMARTPHONE QUERFORMAT – Aufmerksamkeiten
========================================================== */

@media
    (max-width: 768px)
    and (orientation: landscape) {

    .matthew-overlay[data-active-overlay="tributes"] {
        top: 8px;
        bottom: 8px;

        width: min(94vw, 760px);
        height: auto;

        transform: translate(-50%, 0);
    }

    .matthews-place.is-overlay-open
    .matthew-overlay[data-active-overlay="tributes"] {
        transform: translate(-50%, 0);
    }

    .matthew-overlay[data-active-overlay="tributes"]
    .matthew-overlay__content {
        box-sizing: border-box;

        max-height: calc(100dvh - 16px);

        overflow-y: auto;
    }

}

/* ==========================================================
   SMARTPHONE QUERFORMAT – Über diesen Ort
========================================================== */

@media
    (max-width: 768px)
    and (orientation: landscape) {

    .matthew-overlay[data-active-overlay="place-info"] {
        top: 8px;
        bottom: 8px;

        width: min(94vw, 780px);
        height: auto;

        transform: translate(-50%, 0);
    }

    .matthews-place.is-overlay-open
    .matthew-overlay[data-active-overlay="place-info"] {
        transform: translate(-50%, 0);
    }

    .matthew-overlay[data-active-overlay="place-info"]
    .matthew-overlay__content {
        box-sizing: border-box;

        max-height: calc(100dvh - 16px);

        overflow-y: auto;
    }

}

/* ==========================================================
   SMARTPHONE QUERFORMAT – finale Overlay-Breite
========================================================== */

@media
    (max-width: 768px)
    and (orientation: landscape) {

    .matthew-overlay {
        box-sizing: border-box;

        left: 50%;
        right: auto;

        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;

        margin: 0;
    }


    .matthew-overlay__content {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
    }

}