/*
|--------------------------------------------------------------------------
| Locaris – Mobil- und Tabletdarstellung
|--------------------------------------------------------------------------
| Wird ausschließlich bis einschließlich 768 px geladen.
*/

body {
    background: linear-gradient(
        90deg,
        rgba(30, 144, 255, 0.30) 0%,
        rgba(100, 149, 237, 0.30) 50%,
        rgba(30, 144, 255, 0.30) 100%
    );

    color: #222;
}

.app-header {
    min-height: 4rem;
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
}

.app-main {
    width: 100%;
    padding: 0.85rem;
}

.card-grid {
    gap: 0.85rem;
}

.category-tile,
.place-tile,
.card,
.form-card,
.place-detail {
    box-shadow:
        0 0.55rem 1.3rem rgba(24, 51, 40, 0.14),
        0 1px 3px rgba(24, 51, 40, 0.10);
}

.place-tile__navigation-links,
.place-detail-navigation-icons {
    gap: 1rem;
}

.place-tile__navigation-links {
    --place-nav-size: 2.85rem;
}

.place-detail-navigation-icons {
    --place-nav-size: 3.6rem;
}

/* Verhindert versehentliche Hoverbewegungen auf Touchgeräten. */
.category-tile:hover,
.place-tile:hover,
.card:hover {
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Mobile: Detailansicht als Erinnerungskarte
|--------------------------------------------------------------------------
*/

.place-detail-page {
    margin: 0;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 1.35rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(239, 245, 255, 0.94) 52%,
            rgba(223, 233, 252, 0.92) 100%
        );
    box-shadow:
        0 1.15rem 2.8rem rgba(22, 54, 112, 0.22),
        0 0.22rem 0.65rem rgba(22, 54, 112, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

.place-detail-head {
    margin: -0.9rem -0.9rem 0.9rem;
    padding: 0.9rem 1rem 1rem;
    border-bottom: 1px solid rgba(65, 105, 225, 0.18);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.88),
            rgba(215, 228, 255, 0.72)
        );
}

.place-detail-head h1 {
    margin-bottom: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.place-detail-main-image,
.place-detail-empty-image {
    overflow: hidden;
    border: 1px solid rgba(65, 105, 225, 0.22);
    border-radius: 1.05rem;
    box-shadow:
        0 0.8rem 1.8rem rgba(30, 70, 145, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.place-detail-description {
    margin: 0.9rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(65, 105, 225, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.place-gallery--compact {
    margin-top: 0.9rem;
    padding: 0.75rem;
    border: 1px solid rgba(65, 105, 225, 0.16);
    border-radius: 1rem;
    background: rgba(226, 236, 255, 0.68);
}

.place-detail-navigation-icons {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(65, 105, 225, 0.18);
}


/*
|--------------------------------------------------------------------------
| Mobile: Place bearbeiten mit klaren Ebenen
|--------------------------------------------------------------------------
*/

.place-edit-shell {
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 1.35rem;
    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(229, 238, 255, 0.92) 48%,
            rgba(207, 222, 252, 0.90) 100%
        );
    box-shadow:
        0 1.1rem 2.7rem rgba(22, 54, 112, 0.22),
        0 0.2rem 0.6rem rgba(22, 54, 112, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.place-edit-form.form-card {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.place-edit-form > .field {
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border: 1px solid rgba(65, 105, 225, 0.14);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.68);
}

.place-edit-form .form-grid > .field {
    padding: 0.8rem;
    border: 1px solid rgba(65, 105, 225, 0.14);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.68);
}

.place-edit-form .form-section {
    margin: 0.9rem 0 0;
    padding: 0.85rem;
    border: 1px solid rgba(65, 105, 225, 0.22);
    border-radius: 1.05rem;
    background:
        linear-gradient(
            145deg,
            rgba(218, 230, 255, 0.82),
            rgba(241, 246, 255, 0.88)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0.35rem 0.9rem rgba(31, 72, 150, 0.09);
}

.place-edit-form .form-section legend {
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(65, 105, 225, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    color: #263f7f;
    box-shadow: 0 0.2rem 0.55rem rgba(31, 72, 150, 0.10);
}

.place-edit-form .field input,
.place-edit-form .field select,
.place-edit-form .field textarea {
    border-color: rgba(65, 105, 225, 0.26);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 1px 2px rgba(34, 63, 124, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.85);
}

.place-edit-form .compact-upload-card {
    border-color: rgba(65, 105, 225, 0.22);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.95),
            rgba(218, 231, 255, 0.92)
        );
    box-shadow: 0 0.4rem 0.95rem rgba(31, 72, 150, 0.11);
}

.place-edit-actions {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(65, 105, 225, 0.20);
}


/*
|--------------------------------------------------------------------------
| Mobile UI refinement: Detailansicht und Place bearbeiten
|--------------------------------------------------------------------------
*/

/* Detailseite als eine geschlossene Erinnerungskarte */
.place-detail-page {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 1.5rem;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(229, 238, 255, 0.97) 48%, rgba(199, 216, 249, 0.95) 100%);
    box-shadow:
        0 1.3rem 3.2rem rgba(23, 48, 105, 0.28),
        0 0.25rem 0.75rem rgba(23, 48, 105, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.place-detail-head {
    margin: 0;
    padding: 1rem 1.1rem 1.05rem;
    border-bottom: 1px solid rgba(55, 88, 166, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(199, 217, 255, 0.86));
}

.place-detail-head .place-category-back {
    display: inline-flex;
    margin-bottom: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    color: #29477f;
    background: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-weight: 750;
}

.place-detail-head h1 {
    color: #162e61;
}

.place-detail-main-image,
.place-detail-empty-image {
    width: calc(100% - 1.6rem);
    margin: 0.8rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(43, 78, 155, 0.24);
    background: #eaf0fc;
    box-shadow:
        0 0.95rem 2.1rem rgba(24, 56, 122, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.place-detail-description,
.place-gallery--compact {
    margin: 0 0.8rem 0.8rem;
    border: 1px solid rgba(48, 82, 159, 0.20);
    border-radius: 1.05rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(221, 232, 255, 0.84));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 0.4rem 1rem rgba(31, 65, 139, 0.11);
}

.place-detail-description {
    padding: 0.95rem 1rem;
}

.place-gallery--compact {
    padding: 0.75rem;
}

.place-detail-navigation-icons {
    margin: 0;
    padding: 0.95rem 0.9rem 1.05rem;
    border-top: 1px solid rgba(48, 82, 159, 0.20);
    background: rgba(218, 230, 255, 0.64);
}

/* Bearbeiten: klar getrennte, farblich abgestufte Karte */
.place-edit-shell {
    padding: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background:
        linear-gradient(155deg, rgba(196, 215, 252, 0.97) 0%, rgba(226, 236, 255, 0.97) 42%, rgba(184, 205, 247, 0.95) 100%);
    box-shadow:
        0 1.3rem 3.2rem rgba(23, 48, 105, 0.28),
        0 0.25rem 0.75rem rgba(23, 48, 105, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.place-edit-head {
    margin: 0;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(48, 82, 159, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(188, 210, 255, 0.88));
}

.place-edit-head h1 {
    margin: 0;
    color: #162e61;
}

.place-edit-message {
    margin: 0.8rem 0.85rem 0;
}

.place-edit-form.form-card {
    padding: 0.85rem;
}

.place-edit-form > .field,
.place-edit-form .form-grid > .field {
    margin-bottom: 0.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(48, 82, 159, 0.23);
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(250, 252, 255, 0.94), rgba(222, 233, 255, 0.90));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 0.35rem 0.85rem rgba(31, 65, 139, 0.10);
}

.place-edit-form .form-section {
    margin: 0.9rem 0 0;
    padding: 0.95rem;
    border-color: rgba(41, 75, 151, 0.30);
    background:
        linear-gradient(150deg, rgba(191, 212, 253, 0.92), rgba(232, 240, 255, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 0.55rem 1.25rem rgba(28, 62, 134, 0.13);
}

.place-edit-form .form-section legend {
    color: #17356f;
    border-color: rgba(43, 77, 153, 0.26);
    background: linear-gradient(145deg, #ffffff, #dce8ff);
}

.place-edit-form .field input,
.place-edit-form .field select,
.place-edit-form .field textarea {
    border-color: rgba(38, 72, 147, 0.34);
    background: #fff;
    box-shadow:
        inset 0 1px 3px rgba(28, 55, 116, 0.09),
        0 1px 0 rgba(255, 255, 255, 0.9);
}

.place-edit-form .compact-upload-card {
    border-color: rgba(42, 77, 154, 0.30);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(198, 217, 255, 0.94));
    box-shadow:
        0 0.55rem 1.2rem rgba(27, 61, 133, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.place-edit-actions {
    margin: 0;
    padding: 0.95rem 0.85rem 1rem;
    border-top: 1px solid rgba(48, 82, 159, 0.24);
    background: rgba(211, 226, 255, 0.76);
}

/*
|--------------------------------------------------------------------------
| Finale mobile Flächenhierarchie
|--------------------------------------------------------------------------
| Absichtlich am Dateiende: überschreibt ältere mobile Detailregeln.
*/

.place-detail-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.45rem;
    background: linear-gradient(155deg, #d7e5ff 0%, #f7faff 48%, #c6d9ff 100%);
    box-shadow: 0 1.2rem 2.8rem rgba(17, 45, 105, 0.34), 0 0.2rem 0.7rem rgba(17, 45, 105, 0.18);
}

.place-detail-page > .place-detail-head {
    margin: 0;
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid rgba(37, 72, 150, 0.24);
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(188,211,255,.94));
}

.place-detail-page > .place-detail-main-image,
.place-detail-page > .place-detail-empty-image {
    width: calc(100% - 1.6rem);
    margin: 0.8rem;
}

.place-detail-page > .place-detail-description,
.place-detail-page > .place-gallery--compact {
    margin: 0 0.8rem 0.8rem;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,232,255,.94));
    border: 1px solid rgba(37, 72, 150, 0.22);
}

.place-detail-page > .place-detail-navigation-icons {
    margin: 0;
    padding: 1rem;
    border-top: 1px solid rgba(37, 72, 150, 0.22);
    background: linear-gradient(180deg, rgba(216,229,255,.82), rgba(187,207,247,.92));
}

.place-edit-shell {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 1.45rem;
    background: linear-gradient(155deg, #bdd2fb 0%, #e8f0ff 48%, #a9c3f5 100%);
    box-shadow: 0 1.2rem 2.8rem rgba(17,45,105,.34), 0 .2rem .7rem rgba(17,45,105,.18);
}

.place-edit-shell > .place-edit-head {
    margin: 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(183,207,255,.94));
    border-bottom: 1px solid rgba(37,72,150,.25);
}

.place-edit-shell > .place-edit-form {
    padding: 0.9rem;
    background: transparent;
}

.place-edit-form > .field,
.place-edit-form .form-grid > .field,
.place-edit-form .form-section {
    background: linear-gradient(145deg, rgba(248,251,255,.97), rgba(207,223,255,.94));
    border: 1px solid rgba(37,72,150,.25);
    box-shadow: 0 .45rem 1rem rgba(24,56,125,.12), inset 0 1px 0 rgba(255,255,255,.96);
}

.place-edit-shell > .place-edit-actions {
    margin: 0;
    padding: 0.9rem;
    border-top: 1px solid rgba(37,72,150,.25);
    background: linear-gradient(180deg, rgba(214,228,255,.86), rgba(174,198,244,.94));
}


/*
|--------------------------------------------------------------------------
| Mobile Detailansicht – kontrastreiche Erinnerungskarte
|--------------------------------------------------------------------------
| Absichtlich am Dateiende. Diese Regeln ersetzen die früheren blauen
| Flächen in der Detailansicht und setzen sich gegen ältere Selektoren durch.
*/

.place-detail-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #26332c;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 1.45rem;
    background:
        linear-gradient(155deg, #fffdf8 0%, #f6f0e5 52%, #ece4d6 100%);
    box-shadow:
        0 1.25rem 2.9rem rgba(20, 38, 31, 0.32),
        0 0.2rem 0.75rem rgba(20, 38, 31, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.place-detail-page > .place-detail-head {
    margin: 0;
    padding: 1rem 1rem 0.95rem;
    color: #f8fbf9;
    border-bottom: 1px solid rgba(17, 48, 36, 0.42);


background: linear-gradient(
    135deg,
    #3f6f5a 0%,
    #6f9b84 56%,
    #4c7d67 100%
);


    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.place-detail-page > .place-detail-head h1 {
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-family: var(--locaris-font-heading, "Crafty Girls", Arial, sans-serif) !important;
    font-weight: 400;
}

.place-detail-page > .place-detail-head .place-category-back {
    color: #173f31;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.16);
}

.place-detail-page > .place-detail-main-image,
.place-detail-page > .place-detail-empty-image {
    width: calc(100% - 1.6rem);
    margin: 0.8rem;
    border: 1px solid rgba(55, 71, 62, 0.24);
    border-radius: 1.1rem;
    background: #e8e3d9;
    box-shadow:
        0 0.9rem 1.9rem rgba(38, 48, 42, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.place-detail-page > .place-detail-description,
.place-detail-page > .place-gallery--compact {
    margin: 0 0.8rem 0.8rem;
    color: #28342e;
    border: 1px solid rgba(75, 83, 77, 0.20);
    border-radius: 1.05rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 230, 0.96));
    box-shadow:
        0 0.45rem 1rem rgba(44, 51, 47, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.place-detail-page > .place-detail-description {
    padding: 1rem;
}

.place-detail-page > .place-gallery--compact {
    padding: 0.75rem;
}

.place-detail-page > .place-detail-navigation-icons {
    margin: 0;
    padding: 1rem;
    border-top: 1px solid rgba(44, 70, 57, 0.24);
    background:
        linear-gradient(180deg, #e8efe9 0%, #d2dfd5 100%);
}

/* Google Font auch bei spezielleren mobilen Selektoren erzwingen. */
.place-detail-head h1,
.place-edit-head h1,
.category-title,
.category-tile__name,
.place-tile__body h2,
.page-head h1 {
    font-family: var(--locaris-font-heading, "Crafty Girls", Arial, sans-serif) !important;
    font-weight: 400;
}