/* =========================================
 /* =========================================
    AP Hotel Reviews – Global
    ========================================= */

 .aphr-wrapper {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: #111827;
     max-width: 1120px;
     margin: 2.5rem auto;
     padding: 1.75rem;
     border-radius: 18px;
     background: #f3f4f6;
     border: 1px solid #e5e7eb;
     box-shadow: 0 18px 40px rgba(15,23,42,0.12);
 }

 .aphr-wrapper h2,
 .aphr-wrapper h3,
 .aphr-wrapper h4 {
     margin-top: 0;
     color: #0f172a;
 }

 /* =========================================
    Form / Filter
    ========================================= */

 .aphr-filter-row {
     display: grid;
     grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1.1fr));
     gap: 0.75rem;
     margin-bottom: 1.25rem;
 }

 .aphr-filter-group {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     font-size: 0.85rem;
     color: #4b5563;
 }

 .aphr-filter-group label {
     font-weight: 500;
     letter-spacing: 0.02em;
 }

 .aphr-filter-wide {
     grid-column: span 2;
 }

 #aphr-search-input,
 #aphr-filter-min-rating,
 #aphr-filter-has-reviews,
 #aphr-filter-sort,
 .aphr-wrapper input[type="text"],
 .aphr-wrapper input[type="url"],
 .aphr-wrapper input[type="email"],
 .aphr-wrapper input[type="time"],
 .aphr-wrapper select,
 .aphr-wrapper textarea {
     width: 100%;
     border-radius: 999px;
     border: 1px solid #d1d5db;
     background: #ffffff;
     color: #111827;
     padding: 0.55rem 0.85rem;
     font-size: 0.9rem;
     outline: none;
     transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
 }

 .aphr-wrapper textarea {
     border-radius: 14px;
     min-height: 120px;
 }

 #aphr-search-input::placeholder,
 .aphr-wrapper input::placeholder,
 .aphr-wrapper textarea::placeholder {
     color: #9ca3af;
 }

 #aphr-search-input:focus,
 .aphr-wrapper input:focus,
 .aphr-wrapper select:focus,
 .aphr-wrapper textarea:focus {
     border-color: #0ea5e9;
     box-shadow: 0 0 0 1px #0ea5e9;
     background: #ffffff;
 }

 /* =========================================
    Buttons
    ========================================= */

 .aphr-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.3rem;
     padding: 0.55rem 1.1rem;
     border-radius: 999px;
     border: none;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.9rem;
     text-decoration: none;
     white-space: nowrap;
     transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;
 }

 .aphr-btn-primary {
     background: linear-gradient(135deg, #22c55e, #0ea5e9);
     color: #0f172a;
     box-shadow: 0 10px 22px rgba(34,197,94,0.28);
 }

 .aphr-btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(34,197,94,0.35);
 }

 .aphr-btn-secondary {
     background: #ffffff;
     color: #111827;
     border: 1px solid #d1d5db;
 }

 .aphr-btn-secondary:hover {
     background: #f9fafb;
     transform: translateY(-1px);
 }

 /* =========================================
    Suche – Grid / Cards
    ========================================= */

 #aphr-search-results {
     margin-top: 1.25rem;
 }

 .aphr-search-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.15rem;
 }

 .aphr-card {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     box-shadow: 0 10px 26px rgba(15,23,42,0.08);
     cursor: pointer;
     display: flex;
     flex-direction: column;
     transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 }

 .aphr-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 38px rgba(15,23,42,0.14);
     border-color: #0ea5e9;
 }

 /* Bildbereich */

 .aphr-card-thumb-wrapper {
     position: relative;
     overflow: hidden;
 }

 .aphr-card-thumb {
     height: 180px;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     transform: scale(1.02);
     transition: transform 0.25s ease;
 }

 .aphr-card:hover .aphr-card-thumb {
     transform: scale(1.06);
 }

 .aphr-card-thumb--placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #bfdbfe, #e5e7eb);
 }

 .aphr-thumb-icon {
     font-size: 2.1rem;
     color: #1d4ed8;
 }

 /* Rating-Pill */

 .aphr-rating-pill {
     position: absolute;
     right: 0.85rem;
     bottom: 0.8rem;
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     padding: 0.2rem 0.55rem;
     border-radius: 999px;
     background: linear-gradient(135deg, #22c55e, #16a34a);
     color: #0f172a;
     font-size: 0.8rem;
     font-weight: 700;
     box-shadow: 0 10px 26px rgba(22,163,74,0.45);
 }

 .aphr-rating-pill-value {
     font-variant-numeric: tabular-nums;
 }

 /* Card Body */

 .aphr-card-body {
     padding: 0.85rem 0.9rem 0.8rem;
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
 }

 .aphr-card-title {
     margin: 0;
     font-size: 1.02rem;
     font-weight: 650;
     color: #0f172a;
 }

 .aphr-card-meta {
     font-size: 0.85rem;
     color: #4b5563;
 }

 .aphr-card-address {
     font-size: 0.8rem;
     color: #6b7280;
 }

 /* Footer */

 .aphr-card-footer {
     margin-top: 0.45rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.78rem;
 }

 .aphr-card-reviews {
     color: #4f46e5;
 }

 .aphr-card-cta {
     color: #0ea5e9;
     font-weight: 600;
     letter-spacing: 0.03em;
 }

 /* Skeleton Loader */

 .aphr-skeleton-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.15rem;
 }

 .aphr-skeleton-card {
     border-radius: 18px;
     height: 210px;
     background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 40%, #e5e7eb 80%);
     background-size: 200% 100%;
     animation: aphr-shimmer 1.3s infinite;
     opacity: 0.75;
 }

 @keyframes aphr-shimmer {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
 }

 /* States */

 .aphr-empty,
 .aphr-error {
     font-size: 0.9rem;
     color: #374151;
     padding: 0.85rem;
     border-radius: 14px;
     background: #f9fafb;
     border: 1px dashed #d1d5db;
 }

 /* =========================================
    Detailseite – Layout
    ========================================= */

 .aphr-detail-wrapper {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
 }

 /* HERO-BEREICH (Desktop & Mobile; Mobile später leicht angepasst) */

 .aphr-detail-hero {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     min-height: 240px;
     margin-bottom: 0.75rem;
     background-color: #0f172a;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .aphr-detail-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(15,23,42,0.85), rgba(15,23,42,0.3));
 }

 .aphr-detail-hero-content {
     position: relative;
     padding: 1.4rem 1.6rem 1.35rem;
     display: flex;
     flex-direction: column;
     gap: 0.45rem;
     color: #f9fafb;
 }

 .aphr-hero-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.2rem;
     padding: 0.15rem 0.6rem;
     border-radius: 999px;
     font-size: 0.72rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     background: rgba(15,23,42,0.8);
     color: #e5e7eb;
     border: 1px solid rgba(148,163,184,0.6);
 }

 .aphr-hero-title {
     font-size: 1.6rem;
     margin: 0.3rem 0 0.15rem;
 }

 .aphr-hero-meta {
     font-size: 0.9rem;
     color: #e5e7eb;
 }

 .aphr-hero-address {
     font-size: 0.85rem;
     color: #e5e7eb;
     opacity: 0.9;
 }

 .aphr-hero-bottom {
     margin-top: 0.9rem;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 0.75rem;
 }

 .aphr-hero-rating {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
 }

 .aphr-hero-rating-main {
     display: flex;
     align-items: baseline;
     gap: 0.15rem;
 }

 .aphr-hero-rating-value {
     font-size: 2.2rem;
     font-weight: 700;
     color: #22c55e;
 }

 .aphr-hero-rating-scale {
     font-size: 0.95rem;
     color: #e5e7eb;
 }

 .aphr-hero-rating-sub {
     font-size: 0.8rem;
     color: #e5e7eb;
 }

 .aphr-hero-rating-none {
     font-size: 0.9rem;
     color: #f9fafb;
 }

 .aphr-hero-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }

 /* Sektionen */

 .aphr-section {
     margin-top: 0.75rem;
 }

 .aphr-section-header-row {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 0.5rem;
     margin-bottom: 0.45rem;
 }

 .aphr-section-sub {
     font-size: 0.8rem;
     color: #6b7280;
 }

 /* =========================================
    Accordion – Details
    ========================================= */

 .aphr-accordion {
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid #e5e7eb;
     background: #ffffff;
 }

 .aphr-accordion-item + .aphr-accordion-item {
     border-top: 1px solid #e5e7eb;
 }

 .aphr-accordion-header {
     width: 100%;
     background: transparent;
     border: none;
     padding: 0.7rem 0.95rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #111827;
     font-size: 0.9rem;
     cursor: pointer;
 }

 .aphr-accordion-icon {
     font-size: 0.85rem;
     transform: rotate(0deg);
     transition: transform 0.15s ease;
 }

 .aphr-accordion-item.is-open .aphr-accordion-icon {
     transform: rotate(180deg);
 }

 .aphr-accordion-panel {
     display: none;
     padding: 0 0.95rem 0.85rem;
     font-size: 0.86rem;
     color: #374151;
 }

 .aphr-accordion-item.is-open .aphr-accordion-panel {
     display: block;
 }

 /* Amenities Tags */

 .aphr-amenities-tags {
     margin-top: 0.4rem;
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;
 }

 .aphr-amenity-tag {
     font-size: 0.78rem;
     padding: 0.18rem 0.55rem;
     border-radius: 999px;
     background: #eff6ff;
     border: 1px solid #bfdbfe;
     color: #1d4ed8;
 }

 /* Info list */

 .aphr-info-list {
     list-style: none;
     margin: 0.3rem 0 0;
     padding: 0;
     font-size: 0.84rem;
 }

 .aphr-info-list li + li {
     margin-top: 0.2rem;
 }

 .aphr-info-list li span:first-child {
     display: inline-block;
     width: 140px;
     color: #6b7280;
 }

 /* =========================================
    Bilder – Desktop: Grid, Mobile: Scroll
    ========================================= */

 .aphr-images-section h3,
 .aphr-reviews-section h3 {
     margin-top: 0.2rem;
     margin-bottom: 0.6rem;
 }

 /* Desktop / Standard: Grid */

 .aphr-images-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
     gap: 0.75rem;
 }

 .aphr-image-item {
     border-radius: 16px;
     overflow: hidden;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     box-shadow: 0 8px 20px rgba(15,23,42,0.08);
 }

 .aphr-image-item figure {
     margin: 0;
 }

 .aphr-image-item img {
     display: block;
     width: 100%;
     height: 170px;
     object-fit: cover;
 }

 .aphr-image-item figcaption {
     padding: 0.45rem 0.6rem 0.5rem;
     font-size: 0.78rem;
     color: #374151;
 }

 /* Tabs für Bildkategorien */

 .aphr-image-tabs {
     margin-top: 0.3rem;
 }

 .aphr-image-tabs-nav {
     display: flex;
     flex-wrap: wrap;
     gap: 0.35rem;
     margin-bottom: 0.6rem;
 }

 .aphr-image-tab-button {
     border-radius: 999px;
     border: 1px solid #d1d5db;
     background: #ffffff;
     color: #374151;
     font-size: 0.78rem;
     padding: 0.28rem 0.75rem;
     cursor: pointer;
     transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
 }

 .aphr-image-tab-button.is-active {
     background: linear-gradient(135deg, #22c55e, #0ea5e9);
     color: #0f172a;
     border-color: transparent;
 }

 .aphr-image-tab-panel {
     display: none;
 }

 .aphr-image-tab-panel.is-active {
     display: block;
 }

 /* Upload-Card */

 .aphr-image-upload-card {
     margin-top: 0.8rem;
     padding-top: 0.75rem;
     border-top: 1px dashed #d1d5db;
 }

 .aphr-image-upload-inner {
     margin-top: 0.6rem;
     padding: 0.75rem 0.85rem;
     border-radius: 14px;
     background: #f9fafb;
     border: 1px solid #e5e7eb;
     display: none;
 }

 .aphr-image-upload-inner.is-open {
     display: block;
 }

 /* =========================================
    Reviews
    ========================================= */

 .aphr-reviews-list {
     display: flex;
     flex-direction: column;
     gap: 0.7rem;
 }

 .aphr-review-item {
     padding: 0.75rem 0.85rem;
     border-radius: 14px;
     background: #ffffff;
     border: 1px solid #e5e7eb;
 }

 .aphr-review-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.85rem;
     margin-bottom: 0.4rem;
 }

 .aphr-review-rating {
     color: #16a34a;
     font-weight: 600;
 }

 .aphr-review-date {
     color: #6b7280;
     font-size: 0.78rem;
 }

 .aphr-review-answers {
     font-size: 0.82rem;
     color: #374151;
 }

 .aphr-review-answer-line + .aphr-review-answer-line {
     margin-top: 0.2rem;
 }

 .aphr-answer-key {
     font-weight: 500;
     color: #4f46e5;
 }

 /* =========================================
    Form-Layout (Bewertung / Owner-Panel)
    ========================================= */

 .aphr-form-row {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     margin-bottom: 0.7rem;
 }

 .aphr-form-row-inline {
     flex-direction: row;
     gap: 0.75rem;
 }

 .aphr-form-row-inline > div {
     flex: 1 1 0;
 }

 .aphr-message {
     margin-top: 0.4rem;
     font-size: 0.8rem;
     color: #374151;
 }

 /* =========================================
    Review Wizard + Slider
    ========================================= */

 .aphr-review-intro {
     font-size: 0.86rem;
     color: #4b5563;
     margin-bottom: 0.8rem;
 }

 .aphr-review-steps-indicator {
     display: flex;
     gap: 0.7rem;
     margin-bottom: 0.8rem;
 }

 .aphr-step-dot {
     flex: 1 1 0;
     border-radius: 12px;
     padding: 0.4rem 0.5rem;
     background: #f9fafb;
     border: 1px solid #e5e7eb;
     display: flex;
     align-items: center;
     gap: 0.4rem;
 }

 .aphr-step-dot span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     border-radius: 999px;
     background: #e5e7eb;
     font-size: 0.8rem;
 }

 .aphr-step-dot small {
     font-size: 0.78rem;
     color: #6b7280;
 }

 .aphr-step-dot.is-active {
     border-color: #0ea5e9;
     box-shadow: 0 0 0 1px #0ea5e9;
 }

 .aphr-step-dot.is-active span {
     background: linear-gradient(135deg, #22c55e, #0ea5e9);
     color: #0f172a;
 }

 /* Steps */

 .aphr-review-step {
     display: none;
 }

 .aphr-review-step.is-active {
     display: block;
 }

 .aphr-review-step-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }

 /* Main rating slider */

 .aphr-rating-range-wrap {
     position: relative;
     padding: 0.15rem 0 0.6rem;
 }

 .aphr-rating-range-wrap input[type="range"] {
     width: 100%;
 }

 .aphr-rating-range-scale {
     display: flex;
     justify-content: space-between;
     font-size: 0.7rem;
     color: #6b7280;
     margin-top: 0.1rem;
 }

 .aphr-rating-range-value {
     position: absolute;
     right: 0;
     top: -1.1rem;
     font-size: 0.78rem;
     font-weight: 600;
     color: #374151;
 }

 .aphr-rating-range-value span {
     color: #16a34a;
 }

 /* Detail question sliders */

 .aphr-question-rating-row {
     position: relative;
     padding-bottom: 0.5rem;
 }

 .aphr-question-rating-row input[type="range"] {
     width: 100%;
 }

 .aphr-question-rating-scale {
     display: flex;
     justify-content: space-between;
     font-size: 0.7rem;
     color: #6b7280;
     margin-top: 0.1rem;
 }

 .aphr-question-rating-value {
     position: absolute;
     right: 0;
     top: -1.1rem;
     font-size: 0.75rem;
     font-weight: 600;
     color: #374151;
 }

 .aphr-question-rating-value span {
     color: #16a34a;
 }

 .aphr-review-footer-link {
     margin-top: 0.8rem;
     font-size: 0.8rem;
 }

 .aphr-review-footer-link a {
     color: #0ea5e9;
 }

 /* Sticky Mobile CTA (nur Mobile sichtbar) */

 .aphr-sticky-review-cta {
     display: none;
 }

 /* =========================================
    Responsive
    ========================================= */

 @media (max-width: 900px) {
     .aphr-filter-row {
         grid-template-columns: 1fr 1fr;
     }
     .aphr-filter-wide {
         grid-column: span 2;
     }
 }

 @media (max-width: 768px) {
     .aphr-detail-hero {
         min-height: 200px;
     }
     .aphr-hero-bottom {
         flex-direction: column;
         align-items: flex-start;
     }

     /* Bilder auf Mobile als horizontale Scroll-Leiste */

     .aphr-images-grid {
         display: flex;
         gap: 0.75rem;
         padding-bottom: 0.25rem;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
     }

     .aphr-images-grid::-webkit-scrollbar {
         height: 6px;
     }

     .aphr-images-grid::-webkit-scrollbar-track {
         background: #e5e7eb;
     }

     .aphr-images-grid::-webkit-scrollbar-thumb {
         background: #9ca3af;
         border-radius: 999px;
     }

     .aphr-image-item {
         min-width: 190px;
         max-width: 220px;
         scroll-snap-align: start;
         flex-shrink: 0;
     }

     .aphr-sticky-review-cta {
         position: fixed;
         left: 0;
         right: 0;
         bottom: 0;
         padding: 0.5rem 1rem env(safe-area-inset-bottom);
         background: linear-gradient(to top, rgba(15,23,42,0.96), rgba(15,23,42,0.85));
         display: flex;
         justify-content: center;
         z-index: 50;
     }
 }

 @media (max-width: 640px) {
     .aphr-wrapper {
         margin: 1.25rem auto;
         padding: 1.1rem;
         border-radius: 14px;
     }
     .aphr-filter-row {
         grid-template-columns: 1fr;
     }
     .aphr-filter-wide {
         grid-column: span 1;
     }
     .aphr-card-thumb {
         height: 160px;
     }
 }


}