/***********************************************************************************************
 ______              _  _       ______  _       _      ______                                   
(____  \            | |(_)     (_____ \(_)     | |    / _____) _                       _        
 ____)  )_____  ____| | _ ____  _____) )_  ____| |__ ( (____ _| |_  ____ _____ _____ _| |_  ___ 
|  __  (| ___ |/ ___) || |  _ \|  __  /| |/ ___)  _ \ \____ (_   _)/ ___) ___ | ___ (_   _)/___)
| |__)  ) ____| |   | || | | | | |  \ \| ( (___| | | |_____) )| |_| |   | ____| ____| | |_|___ |
|______/|_____)_|    \_)_|_| |_|_|   |_|_|\____)_| |_(______/  \__)_|   |_____)_____)  \__|___/ 
                                                                                                
- - - - - - - - - - - - - - - - Car Spotting since 2010. - - - - - - - - - - - - - - - - - - - -
************************************************************************************************/


/* ===============================
   THEME VARIABLES
   =============================== */
:root {
  --bg: #ffffff;
  --text: #333;
  --link: #333;
  --border-grey: #ccc;
  --button: #eee;
  --accent: #2085dd;
  --hover: rgba(255, 255, 255, 0.66);
  --transition-duration: 0.4s;
  --transition-easing: ease;
  --grad-shad: rgba(0,0,0,0.075);
  --button-text: #f5f5f5;
  --text-unav: rgba(0,0,0,0.5);
}

.brand-logo { display: none; }

@media (prefers-color-scheme: light) {
.brand-logo.logo-light { display: inline-block; }
}

@media (prefers-color-scheme: dark) {
  :root { 
    --bg: #161616; 
    --text: #f5f5f5; 
    --link: #f5f5f5; 
    --border-grey: #333; 
    --button: #333;
    --hover: rgba(0, 0, 0, 0.66); 
    --grad-shad: rgba(0,0,0,0.25); 
    --text-unav: rgba(255,255,255,0.5); 
  }
  img.logo { filter: invert(1); } 
  .legal { opacity: 1.0; }
  .brand-logo.logo-dark { display: inline-block; }
}

/* ===============================
   RESET & GLOBAL STYLES
   =============================== */
* { font-family: 'Roboto', 'Calibri', Arial, sans-serif; font-weight: 300; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; tap-highlight-color: rgba(255, 255, 255, 0) !important; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: #fff; }
html { -webkit-font-smoothing: antialiased; }
html, body { height: auto; margin: 0; }
body { background: var(--bg); color: var(--text); overflow-y: auto; transition: background-color var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
img { max-width: 100%; height: auto; display: block; }
.fade-in { opacity: 0; }
.fade-in.is-visible { animation: fadein var(--transition-duration, .4s) ease-in forwards; }
.is-topspot:not(.is-visible) { animation: none; }
a { text-decoration: none; }
ul, ol { list-style: none; }
.centered { text-align: center !important; margin-bottom: 40px; }
.spot-top-logo img { border-radius: 10px}
button, .button-page { display: inline-block; background-color: var(--button); color: var(--text); text-transform: uppercase; border: none; cursor: pointer; text-align: center; font-size: 1rem; transition: color var(--transition-duration) var(--transition-easing), background-color var(--transition-duration) var(--transition-easing); }
button { min-width: 120px; padding: 0.8rem 2rem; width: 100%; }
.button-page { padding: 0.8rem 1.5rem; }
button:hover, .button-page:hover { background-color: var(--accent); color: var(--button-text); }
input, textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); padding: 8px 0; margin-top: 0.4rem; color: var(--text); font-family: inherit; }
input:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }
textarea { resize: vertical; }
.spotting-form input[readonly] { background-color: var(--button); color: var(--text-unav); cursor: not-allowed; padding: 10px; font-style: italic; }
.spotting-form input[readonly]:focus { outline: none; border-bottom-color: var(--border-grey); }
[hidden] { display: none !important; }
.page-root { min-height: 100vh; display: flex; flex-direction: column; }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Smooth transitions for the scroll-fade vars */
@property --fade-left {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --fade-right {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* ===============================
   LAYOUT
   =============================== */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.container { flex: 1 0 auto; padding: 0 25px; width: 100%; margin: 0 auto; }
.container.inside { display: flex; flex-direction: column; }
.header { text-align: center; margin-top: 20px; }
.header .logo { pointer-events: none; display: inline-block; max-width: 250px; height: auto; }
.header h2 { margin-top: 10px; }
.content, .rebuild { text-align: center; }
.main-spot { position: relative; overflow: visible; }
.main-spot > .container { position: relative; z-index: 100; }
.responsive-main-spot { /* max-height: 90vh; */ display: block; }
.sticky-wrapper { position: sticky; top: 0; z-index: 1000; }
.sticky-wrapper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; background: linear-gradient(to bottom, var(--grad-shad), rgba(0,0,0,0)); pointer-events: none; }
.sticky-wrapper.is-stuck .sticky-head { background: var(--bg); }
.sticky-wrapper:not(.is-stuck)::before { content: ""; position: absolute; left: 0; right: 0; top: -48px; height: 48px; background: linear-gradient( to top, rgba(0,0,0,0.35), rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.0) 100% ); pointer-events: none; z-index: 0; }
.sticky-head > * { position: relative; z-index: 2; }
.sticky-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-bottom: 1px solid var(--accent); user-select: none; }
.sticky-head img.logo { max-height: 60%; }
.sticky-logo { max-width: 250px; margin: 20px 0 20px 20px; }
.navigation { position: absolute; right: 0; margin: 20px 20px 20px 0; }
.portfolio-pic { display: flex; position: relative; overflow: hidden; }
.portfolio-pic .overlay { position: absolute; inset: 0; background: var(--hover); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-duration) var(--transition-easing); }
.portfolio-pic:hover .overlay { opacity: 1; }
.portfolio-row { display: flex; }
footer.legal { padding: 5px 25px 10px 25px; text-align: center; }
.legal-links { margin-top: 10px; }
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-menu { position: absolute; top: 100%; right: 0; min-width: 180px; padding: 5px 0; background: var(--bg); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.35); z-index: 9999; opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden; transition: opacity var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing), visibility 0s linear var(--transition-duration); }
.nav-dropdown-menu a { display: block; padding: 5px 10px; white-space: nowrap; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition: opacity var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing), visibility 0s; }

/* ===============================
   TYPOGRAPHY
   =============================== */
h1, h2, h3 { color: var(--text); font-size: 1.375rem; }
h4 { color: var(--text); font-size: 1.125rem; }
h1.up_headline { margin: 40px 0; font-size: 1.625rem; text-transform: uppercase; text-align: center; }
h2.up_headline, h4.up_headline { text-align: center; }
h1.spot_headline { font-size: 2rem; text-transform: uppercase; text-align: left; }
p, .spot-meta { font-size: 1rem; line-height: 1.4; }
p { color: var(--text); }
.spot-meta, { color: var(--text); }
.spot-topspot-info { color: var(--accent); font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; }
.legal p { font-size: 0.75rem; text-transform: uppercase; }

/* ===============================
   LINKS
   =============================== */
a, .social-icons a { color: var(--link); font-size: 1rem; text-transform: uppercase; transition: color var(--transition-duration) var(--transition-easing); }
a:hover, .social-icons a:hover { color: var(--accent); }
.legal a { font-size: 0.75rem; }
a:focus, a:active, input:focus, input:active, textarea:focus, textarea:active { outline: 0 !important; box-shadow: none !important; }
.navigation a, .navigation .a2, .photo-footer p { font-size: 1.125rem; text-transform: uppercase; }
.navigation a.is-active { color: var(--accent); }

/* ===============================
   DIVIDERS
   =============================== */
.trennlinie-blau { height: 1px; width: 100%; background: var(--accent); margin: 70px 0; }
.trennlinie-blau2 { height: 1px; width: 100%; background: var(--accent); margin: 20px 0; }
.trennlinie-blau3 { height: 1px; width: 100%; background: var(--accent); margin: 0 0 15px 0; }
.trennlinie-grau { height: 1px; background: var(--border-grey); margin: 40px 25px 0 25px; }
.trennlinie-grau2 { height: 1px; background: var(--border-grey); margin: 20px 25px 0 25px; }

/* ===============================
   HOMEPAGE HERO
   =============================== */
#headerbild { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
body.hero-hidden #headerbild { display: none !important; }
#headerbild .headerbild { width: 100%; height: 100vh; min-height: 520px; max-height: 900px; overflow: hidden; position: relative; will-change: transform; }
#headerbild .headerbild img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; transform: scale(1.15); will-change: transform; }
#headerbild .hero-caption { position: absolute; right: 20px; bottom: 120px; z-index: 5; text-align: right; line-height: 0.7; will-change: opacity, transform; }
#headerbild .hero-caption h1 { line-height: 1; font-size: 3.125rem; font-weight: 100; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 8px rgba(0,0,0,0.75); margin-bottom: 20px; } 
#headerbild .hero-caption .hero-meta { font-size: 1.25rem; text-transform: uppercase; color: rgba(255,255,255,0.85); text-shadow: 1px 1px 6px rgba(0,0,0,0.75); } 
#headerbild .hero-gradient { position: absolute; inset: 0; 
  background: linear-gradient( to top, 
    rgba(0,0,0,0.55) 0%, 
    rgba(0,0,0,0.25) 25%, 
    rgba(0,0,0,0.05) 45%, 
    rgba(0,0,0,0.0) 65%
  ); z-index: 2; pointer-events: none; will-change: opacity; }

#headerbild .hero-scroll-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); z-index: 3; pointer-events: none; transition: background 0.1s linear; will-change: background; }
.page-over-hero { position: relative; z-index: 10; margin-top: calc(100vh - 80px); background: var(--bg); }
#hero-end-sentinel { position: relative; height: 1px; margin-top: 100vh; }
.hero-meta { text-align: right; }

/* ===============================
   FOOTER / LEGAL
   =============================== */
.legal { margin-top: auto; text-align: center; }
.infos, .copyright { font-size: 0.75rem; }
.copyright { margin-top: 10px; }
footer { flex-shrink: 0; }

/* ===============================
   ICONS
   =============================== */
.social-icons { display: flex; justify-content: center; gap: 20px; margin: 10px 0 30px 0; }
.social-icons svg { width: 22px; height: 22px; fill: currentColor; }

/* ===============================
   LANDING PAGE
   =============================== */
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 40px 0; }
.social-links a { flex: 0 1 auto; padding: 10px 20px; transition: all var(--transition-duration) var(--transition-easing); }
.social-links a:hover { background: var(--accent); color: #fff; }
.rebuild { margin-top: auto; font-size: 1.5rem; padding: 60px 20px; }

/* ===============================
   LEGAL PAGES
   =============================== */
.legal-page { max-width: 800px; margin: 0 auto; padding: 0 0 20px 0; }
.legal-page .ce_headline { text-align: center; margin-bottom: 30px; }
.disclaimer-img { text-align: left; margin: 30px 0; }
.disclaimer-img img { max-width: 400px; pointer-events: none; }
.legal-content { text-align: left; }
.legal-content h2 { margin: 40px 0 20px 0; }
.legal-content h4 { margin: 30px 0 15px 0; }
.legal-content p { margin-bottom: 20px; line-height: 1.6; }
.legal-content a { text-decoration: underline; text-transform: none; }

/* ===============================
   CONTACT FORM
   =============================== */
.spotting-form { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.spotting-form label, .login-form label { display: block; margin-bottom: 2rem; font-size: 1rem; text-transform: uppercase; }
.spotting-form label.checkbox,
.login-form label.checkbox { display: flex; align-items: center; gap: 0.6rem; text-transform: none; }
.spotting-form input, .spotting-form textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); padding: 8px 0; margin-top: 0.4rem; color: var(--text); font-family: inherit; }
.spotting-form input[type="checkbox"],
.login-form input[type="checkbox"] { width: auto; flex-shrink: 0; margin-top: 0; }
.spotting-form a, .login-form a { font-size: 0.75rem; text-transform: none; text-decoration-line: underline; }
.spotting-form input:focus, .spotting-form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.spotting-form textarea { resize: vertical; }
.form-note, .form-note2 { font-size: 0.75rem; }
.form-note { text-align: right; }
.form-note2 { text-align: left; text-transform: none; }
.hp-field { position: absolute; left: -9999px; }
.form-row { display: flex; gap: 1rem; }
.form-field { flex: 1; }
.spotting-form .form-success { font-size: 1rem; text-align: center; color: var(--text); }
.form-proof { margin: 40px 0; }
.form-proof input[type="file"] { display: none; }
.file-label { display: inline-block; padding: 10px 16px; background: var(--button); color: var(--text); font-size: 0.85rem; text-align: center; cursor: pointer; transition: var(--transition-duration) var(--transition-easing); border: 1px solid transparent; }
.file-label:hover { color: var(--button-text); background: var(--accent); }
.file-label.selected { color: var(--button-text); background: var(--accent); }
input.error:not([type="checkbox"]):not([type="file"]):not([readonly]), 
input.error:focus:not([type="checkbox"]):not([type="file"]):not([readonly]),
textarea.error,
textarea.error:focus,
select.error,
select.error:focus,
.spotting-form input.error:not([type="checkbox"]):not([type="file"]):not([readonly]),
.spotting-form input.error:focus:not([type="checkbox"]):not([type="file"]):not([readonly]),
.spotting-form textarea.error,
.spotting-form textarea.error:focus,
.spotting-form select.error,
.spotting-form select.error:focus { border-bottom-color: red !important; }
.field-error { color: red; font-size: 0.75rem; margin-top: 5px; display: block; }

.spotting-form input[type="checkbox"],
.search-checkbox input[type="checkbox"],
.login-form input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-grey); background: transparent; cursor: pointer; position: relative; margin: 0; flex-shrink: 0; transition: border-color var(--transition-duration) var(--transition-easing), background-color var(--transition-duration) var(--transition-easing); }

.spotting-form input[type="checkbox"]:checked,
.search-checkbox input[type="checkbox"]:checked,
.login-form input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }

.spotting-form input[type="checkbox"]:checked::after,
.search-checkbox input[type="checkbox"]:checked::after,
.login-form input[type="checkbox"]:checked::after { content: '✓'; position: absolute; color: #fff; font-size: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.spotting-form input[type="checkbox"].error,
.login-form input[type="checkbox"].error { border-color: red; }

.spotting-form input[type="checkbox"]:focus,
.login-form input[type="checkbox"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.file-label.error { border-color: red !important; }

/* ===============================
   SEARCH FORM
   =============================== */
.search-form { max-width: 900px; margin: 0 auto; padding: 2rem 0; }
.search-section { margin-bottom: 2rem; }
.search-section:last-of-type { border-bottom: none; }
.search-section-title { font-size: 0.875rem; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem 0; font-weight: 400; }
.search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.search-grid-3 { grid-template-columns: repeat(3, 1fr); }
.search-grid-single { grid-template-columns: 1fr; }
.search-field { display: flex; flex-direction: column; }
.search-field label { font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text); opacity: 0.7; }
.search-field select { cursor: pointer; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); padding: 8px 0; color: var(--text); font-family: inherit; font-size: 1rem; }
.search-field select:focus { outline: none; border-bottom-color: var(--accent); }
.search-field select:disabled { opacity: 0.5; cursor: not-allowed; }
.search-field.has-value { position: relative; }
.search-field.has-value::before { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: 0.08; pointer-events: none; border-radius: 2px; }
.search-checkbox { display: flex; align-items: center; gap: 0.75rem; }
.search-field input { margin-top: auto; }
.search-checkbox label { font-size: 0.875rem; text-transform: uppercase; cursor: pointer; margin: 0; }
.search-checkboxes { display: flex; gap: 3rem; }
.search-actions { display: flex; gap: 1rem; margin-top: 2rem; justify-content: center; }
.search-submit { min-width: 200px; padding: 1rem 3rem; }
.search-reset { padding: 1rem 2rem; opacity: 0.5; }
.search-active { max-width: 900px; margin: 0 auto 2rem auto; padding: 1rem; background: var(--button); display: flex; justify-content: space-between; align-items: center; border-left: 3px solid var(--accent); }
.search-active p { margin: 0; font-size: 0.875rem; text-transform: uppercase; }
.search-clear { font-size: 0.875rem; text-transform: uppercase; color: var(--accent); transition: color var(--transition-duration) var(--transition-easing); }
.search-clear:hover { color: var(--text); }
.search-field.calendar { position: relative; }
.search-field input[type="text"] { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); padding: 8px 0; color: var(--text); font-family: inherit; font-size: 1rem; cursor: pointer; }
.search-field input[type="text"]:focus { outline: none; border-bottom-color: var(--accent); }
.search-field.calendar .clear-date { width: auto; position: absolute; right: 0; bottom: 6px; background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--text); opacity: 0.5; }
.search-field.calendar .clear-date:hover { opacity: 1; }
.search-field.calendar:not(.has-value) .clear-date { display: none; }

/* ===============================
   INTRO SECTION
   =============================== */
.intro-section { max-width: 90%; margin: 0 auto 1rem auto; display: flex; flex-flow: row wrap; gap: 2rem; padding: 3rem 1rem; align-items: center; border-bottom: 1px solid var(--accent); }
.intro-image { flex: 1; max-width: 33%; }
.intro-image img { width: 100%; height: auto; display: block; object-fit: cover; }
.intro-text { flex: 2; }
.intro-text p { font-size: 0.875rem; margin-top: 1rem; }

/* ===============================
   SPOTS GRID
   =============================== */
.image-grid { margin-bottom: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.image-item { position: relative; overflow: hidden; }
.image-item img { width: 100%; height: auto; display: block; transition: transform var(--transition-duration) var(--transition-easing); }
.image-item:hover img { transform: scale(1.05); }
.overlay { position: absolute; inset: 0; background: var(--hover); display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity var(--transition-duration) var(--transition-easing); padding: 1rem; color: #fff; }
.image-item:hover .overlay { opacity: 1; }
.overlay-text { position: absolute; right: 0.875rem; bottom: 0.875rem; text-align: right; }
.overlay-text p { text-shadow: 1px 1px 1px rgba(0,0,0,0.9); color: var(--button-text); font-size: 1.25rem; margin: 5px; transition: transform var(--transition-duration) var(--transition-easing); transform: translate3d(0,15px,0); }
.image-item:hover .overlay-text p { transform: translate3d(0,0,0); }
.image-item.topspot { animation: glowPulse 3s ease-in-out infinite; border: 2px solid var(--accent); position: relative; overflow: hidden; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 30px 0; }
.pagination .current { color:var(--button-text); background:var(--accent); pointer-events: none; }
.pagination a:hover { background: var(--accent); }
.spot-box { text-transform: none; }
.spots-controls { /*max-width: 900px; */ margin: 0 auto 2rem auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.active-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; }
.filter-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.6; }
.filter-tag { font-size: 0.75rem; padding: 0.25rem 0.75rem; background: var(--button); color: var(--text); border-bottom: 1px solid var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity var(--transition-duration) var(--transition-easing); }
.filter-tag:hover { opacity: 0.7; }
.filter-tag-remove { font-size: 1rem; line-height: 1; opacity: 0.6; }
.filter-tag:hover .filter-tag-remove { opacity: 1; }
.filter-clear-all { font-size: 0.75rem; text-transform: uppercase; color: var(--accent); transition: color var(--transition-duration) var(--transition-easing); }
.filter-clear-all:hover { color: var(--text); }
.sort-control { display: flex; align-items: center; gap: 0.5rem; }
.sort-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.6; white-space: nowrap; }
.sort-select { font-size: 0.75rem; padding: 0.35rem 0.5rem; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); color: var(--text); font-family: inherit; }

.no-results { text-align: center; padding: 3rem 1rem; font-size: 1.125rem; }

@keyframes glowPulse { 
  0% {box-shadow:0 0 10px rgba(32,133,189,.5);} 
  50% {box-shadow:0 0 22px rgba(32,133,189,1);} 
  100% {box-shadow:0 0 10px rgba(32,133,189,.5);} 
}

/* ===============================
   MAIN SPOT
   =============================== */
.spot-top { display: flex; max-width: 80%; margin: 35px auto; width: 100%; z-index: 10; }
.spot-top, .spot-main-container { position: relative; z-index: 1; }
.spot-top-divider { width: 1px; background-color: var(--border-grey); margin: 0 50px; }
.spot-top-info { flex:1; display:flex; flex-flow: column nowrap; margin:auto; align-items:flex-start; }
.spot-meta { margin-top:10px; text-transform:uppercase; text-align:left; opacity: 0.5; }
.spot-grey { background: #161616; position: relative; z-index: 50; }
.spot-images-column { max-width: 80%; margin:0 auto; display:flex; flex-direction:column; align-items: center; }
.spot-remove { text-transform: none; font-size: 0.75rem; text-decoration: underline; }
.remove-link { margin: 40px 0 0 0; }
.views { margin: 20px 0; text-transform: uppercase }
.spot-main-content { position: relative; overflow: visible; }
.spot-grey::before { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 200px; z-index: 1; pointer-events: none; background: radial-gradient( ellipse 50% 100% at 50% 100%, rgba(32, 133, 189, 0.6), rgba(32, 133, 189, 0) 100% ); opacity: 0; border-bottom: 2px solid var(--accent); }
.is-topspot .spot-grey::before { opacity: 1; }
.spot-topspot-info { margin-bottom: 5px; position: relative; display: inline-flex; align-items: center; gap: 6px;}
.info-label { font-size: 0.75rem; opacity: 0.6; cursor: help; text-transform: none; }
.label-tooltip { position: absolute; top: 100%; left: 0; margin-left: 0px; margin-top: 6px; transform: none; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 0.75rem; padding: 6px 8px; border-radius: 4px; white-space: normal; max-width: 280px; overflow-wrap: normal; opacity: 0; pointer-events: none; transition: var(--transition-duration) var(--transition-easing); z-index: 10; }
.topspot-tooltip { margin-left: 6px; margin-top: 0px; white-space: nowrap; max-width: inherit; overflow-wrap: normal; }
.spot-topspot-info:hover .label-tooltip, .label-container:hover .label-tooltip { opacity: 1; }
.label-container { position: relative; }
.info-overlay.btn-link { min-height: 50px; display: flex; flex-direction: column; text-decoration: none; background: var(--button); transition: background-color var(--transition-duration) var(--transition-easing); border: none; }
.info-overlay.btn-link .btn-text,
.info-overlay.btn-link .info-hl { transition: color var(--transition-duration) var(--transition-easing); }
.info-overlay.btn-link:hover { background-color: var(--accent); }
.info-overlay.btn-link:hover .btn-text,
.info-overlay.btn-link:hover .info-hl { color: var(--button-text); }
.main-spot { margin: auto; width: 100%; display: block; }
.spot-main-image, .spot-additional-image { display: flex; justify-content: center; width: 100%; }
.spot-content-width { width: 100%; max-width: 80%; margin: 0 auto; }

/* ===============================
   RELATED SPOTS
   =============================== */
.spot-related-wrapper { text-align: center; }
.spot-related { display: inline-flex; max-width: 100%; text-align: left; gap: 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overflow-y: hidden; padding-bottom: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding: 0 12px; }
.spot-related.is-scrollable {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0, calc(1 - var(--fade-left))) 0px,
    rgba(0,0,0, 1) 24px,
    rgba(0,0,0, 1) calc(100% - 24px),
    rgba(0,0,0, calc(1 - var(--fade-right))) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0, calc(1 - var(--fade-left))) 0px,
    rgba(0,0,0, 1) 24px,
    rgba(0,0,0, 1) calc(100% - 24px),
    rgba(0,0,0, calc(1 - var(--fade-right))) 100%
  );

  transition:
    --fade-left var(--transition-duration) var(--transition-easing),
    --fade-right var(--transition-duration) var(--transition-easing);
}
.spot-related::-webkit-scrollbar { height: 0; display: none; }
.spot-related-ui { align-items: flex-end; }
.scroll-track { position: relative; flex: 1; height: 1px; background: var(--border-grey); overflow: hidden; }
.scroll-thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 24px; background: var(--accent); }
.scroll-btn { flex: 0 0 auto; background: var(--button); border: none; color: var(--text); font-size: 0.75rem; width: 36px; height: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) var(--transition-easing); }
.scroll-btn:hover:not(:disabled) { background: var(--accent); color: #f5f5f5; }
.scroll-btn:disabled { cursor: default; background: var(--button); color: var(--text); opacity: 0; }
.scroll-btn::before { content: ''; width: 0; height: 0; border-style: solid; }
.scroll-btn.prev::before { border-width: 4px 6px 4px 0; border-color: transparent currentColor transparent transparent; }
.scroll-btn.next::before { border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; }
.related-spot { flex: 0 0 auto; margin: 0; height: 200px; min-width: 300px; scroll-snap-align: center; scroll-snap-stop: normal; position: relative; overflow: hidden; }
.related-spot:first-child { scroll-snap-align: start; }
.related-spot:last-child { scroll-snap-align: end; }
.related-spot img { height: 100%; width: auto; min-width: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; will-change: transform; }
.related-spot:hover img { transform: scale(1.05); }
.related-spot:hover .related-overlay { opacity: 1; }
.related-overlay { position: absolute; inset: 0; background: var(--hover); opacity: 0; transition: opacity var(--transition-duration) var(--transition-easing); pointer-events: none; }
.spot-main-container { width:100%; margin:auto; overflow: visible; }
.more-spots { text-transform:uppercase; display:flex; margin:20px 0 10px 0; justify-content: center;}
.related-spot.see-all { position: relative; pointer-events: auto }
.related-spot.see-all img { filter: grayscale(100%); }
.related-spot.see-all .overlay-text p { font-size: 1.25rem; text-transform: uppercase; }

/* ===============================
   SPOT INFOS
   =============================== */
.info { display: grid; gap: 40px; margin: 20px auto 0 auto; max-width: 80%; padding: 0; order-bottom: 1px solid var(--border-grey); }
.info-container { flex: 1 1; display: flex; flex-direction: column; gap: 20px; }
.btn-text, .info-cat { font-size: 1rem; color: var(--text); }
.info-cat { text-transform: uppercase; }
.info-row { display: flex; justify-content: space-between; gap: 10px; }
.info-row .info-overlay { flex: 1; flex-direction: column; align-items: center; background: var(--button); padding: 15px; text-align: center; }
.info-hl { text-transform: uppercase; font-size: 0.75rem; margin-bottom: 5px; }
.plate-pic img { max-width: 100%; margin: auto }
.plate-text, .plates, .remove-text { font-size: 0.75rem; color: var(--text); margin: auto; text-transform: none; }
.plate-link, .info-overlay { display: flex; }
.info-overlay .btn-text { margin: auto }
.info-overlay { transition: color var(--transition-duration) var(--transition-easing), background-color var(--transition-duration) var(--transition-easing); }
.spot-infos { padding: 0 !important; }

/* ===============================
   UPLOAD PAGE
   =============================== */
.upload-info { max-width: 900px; margin: 0 auto 2rem; text-align: center; }
.upload-info p { margin: 0.5rem 0; }
.upload-note { font-size: 0.875rem; opacity: 0.7; }
.upload-grid { position: relative; display: grid; /* grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));*/ gap: 2rem; margin-bottom: 3rem; }
#upload-grid.drag-over { outline: 2px dashed var(--accent); outline-offset: -10px; }
.upload-grid.drag-over::after { content: "Drop to add spot"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); backdrop-filter: blur(2px); pointer-events: none; z-index: 20; }
.upload-add { min-height: 300px; border: 2px dashed var(--border-grey); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-duration) var(--transition-easing); background: transparent; }
.upload-add:hover { border-color: var(--accent); background: rgba(32, 133, 221, 0.05); }
.upload-add:hover .add-icon { color: var(--accent); }
.upload-add p { margin-top: 1rem; font-size: 1rem; text-transform: uppercase; color: var(--text); opacity: 0.7; }
.upload-box { position: relative; border: 1px solid var(--border-grey); }
.upload-remove { position: relative; padding: 0; background: var(--button); color: var(--text); border: none; font-size: 1.5rem; cursor: pointer; z-index: 10; transition: background var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
.upload-remove:hover { background: var(--accent); }
.upload-preview { position: relative; width: 100%; aspect-ratio: 3/2; background: #000; overflow: hidden; cursor: pointer; }
.upload-preview-img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-duration) var(--transition-easing); }
.upload-preview:hover .upload-preview-overlay { opacity: 1; }
.upload-preview-change { color: #fff; text-transform: uppercase; font-size: 0.875rem; }
.upload-section { margin: 20px 0; }
.upload-section:last-of-type { border-bottom: none; }
.upload-section-title { font-size: 0.875rem; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem 0; font-weight: 400; }
.upload-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; margin: 0;}
.upload-row-2 { display:grid !important; grid-template-columns: repeat(2, 1fr); }
.upload-row-3 { display:grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.upload-row:last-child { margin-bottom: 0; }
.done-row { margin-bottom: 0 !important; }
.upload-field { display: flex; flex-direction: column; }
.upload-field label { font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text); opacity: 0.7; }
.upload-field select, .upload-field input[type="text"], .upload-field input[type="date"], .upload-field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-grey); padding: 8px 0; color: var(--text); font-family: inherit; font-size: 1rem; }
.upload-field select:focus, .upload-field input:focus, .upload-field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.upload-field select:disabled { opacity: 0.5; cursor: not-allowed; }
.upload-field textarea { resize: vertical; min-height: 60px; }
.upload-additional-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.upload-additional-slot { aspect-ratio: 3/2; user-select: none; -webkit-user-select: none; background: rgba(0, 0, 0, 0.1); border: 1px dashed var(--border-grey); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; transition: border-color var(--transition-duration) var(--transition-easing); }
.upload-additional-slot:hover { border-color: var(--accent); }
.upload-additional-slot:hover .add-icon { color: var(--accent); }
.upload-additional-slot[data-filled="true"] { border: 0;cursor: grab; }
.upload-additional-slot img { pointer-events: none; user-drag: none; -webkit-user-drag: none;width: 100%; height: 100%; object-fit: cover; }
.upload-additional-slot .add-icon { font-size: 2rem; pointer-events: none; transition: color var(--transition-duration) var(--transition-easing); }
.upload-additional-fileinput { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; white-space: nowrap; cursor: pointer; z-index: 10; }
.upload-additional-remove { opacity: 0; position: absolute; width: 100%; top: 0; height: 20px; padding: 0; background: var(--accent); color: var(--button-text); border: none; font-size: 1rem; line-height: 1; cursor: pointer; transition: background var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) var(--transition-easing); }
.upload-additional-remove:hover { background: var(--accent); }
.upload-additional-slot[data-filled="true"]:hover .upload-additional-remove { opacity: 0.75; transition: opacity var(--transition-duration) var(--transition-easing);}
.upload-additional-grid.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }
.upload-additional-slot.dragging { opacity: 0.5; }
.upload-additional-slot[data-filled="true"]:active { cursor: grabbing; }
.upload-date, .upload-colorname { margin: 0; }
.upload-date { padding-top: 0 !important; }
.upload-submit[disabled], .upload-submit.is-loading { pointer-events: none; opacity: 0.6; }
.upload-field-error { display: block; font-size: 0.75rem; color: #e04444; margin-top: 0.35rem; line-height: 1.3; }
.upload-progress-bar { width: 100%; height: 4px; background: rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 2px; }
.upload-progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s ease-out; }
.upload-box-inner { display: grid; gap: 2rem; }
.upload-form { max-width: 100%; padding: 0; }
.upload-checkbox { margin-bottom: 0 !important; }
.row-right { margin-right: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.upload-row { display: block }
.newmodel-row {  }
.newlocation-row {  }
.add-icon { opacity: 1; font-size: 4rem; color: var(--border-grey); transition: color var(--transition-duration) var(--transition-easing); }
.required { color: var(--accent); }
.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
.upload-rules p { margin: 0 0 10px 0; font-size: 12px; text-align: center; }
.upload-rules a { font-size: 12px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===============================
   PLATE IMAGE PREVIEW
   =============================== */
.plate-preview-wrapper { display: inline-flex; align-items: stretch; width: fit-content; margin: 0; }
.plate-preview { background: rgba(0, 0, 0, 0.1); height: 50px; width: 260px; border: 1px dashed var(--border-grey); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-color var(--transition-duration) var(--transition-easing); }
.plate-preview:hover { border-color: var(--accent); }
.plate-preview:hover .plate-placeholder { color: var(--accent); }
.plate-preview img { height: 50px; width: auto; object-fit: contain; }
.plate-placeholder { font-size: 2rem; pointer-events: none; }
.plate-remove { min-width: 0 !important; width: 25px; height: 50px; padding: 0; background: var(--accent); color: var(--button-text); border: none; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-duration) var(--transition-easing);}
.plate-preview-wrapper.filled:hover .plate-remove { opacity: 1; pointer-events: auto; }
.plate-preview-wrapper.filled .plate-preview { width: auto; border: 0; background: inherit;}
.plate-box { margin: 1rem 0 0 0; }

/* ===============================
   WATERMARK POPUP
   =============================== */
.wm-popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wm-popup { background: var(--bg); border: 1px solid var(--border-grey); width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; }
.wm-popup-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-grey); flex-shrink: 0; }
.wm-popup-close { background: var(--button); border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 0; transition: background var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
.wm-popup-close:hover { background: var(--accent); }
.wm-popup-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0; }
.wm-popup-row { display: flex; gap: 1.25rem; align-items: flex-start; }
.wm-popup-preview { flex-shrink: 0; width: 280px; }
.wm-popup-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--border-grey); }
.wm-popup-controls { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.25rem; flex: 1; }
.wm-popup-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); opacity: 0.5; margin: 0; }

/* ===============================
   RADIO BUTTONS
   =============================== */
.wm-popup-radios { display: flex; gap: 1rem; }
.radio { min-width: 5rem; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; font-size: 0.875rem; color: var(--text); }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio-ui { width: 14px; height: 14px; border: 2px solid var(--border-grey); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s ease; }
.radio-ui::after { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; transform: scale(0); transition: transform .15s ease-out; }
.radio input:checked + .radio-ui { border-color: var(--accent); }
.radio input:checked + .radio-ui::after { transform: scale(1); }
.radio input:focus-visible + .radio-ui { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===============================
   UPLOAD DONE CARD
   =============================== */
.upload-done-card { display: flex; flex-direction: column; }
.upload-done-img { width: 100%; aspect-ratio: 3/2; overflow: hidden; }
.upload-done-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-done-info { padding: 1.25rem 1.5rem 1.5rem; }
.upload-done-title { color: var(--button-text); text-shadow: 1px 1px 1px rgba(0,0,0,0.9); }
.upload-done-meta { color: var(--text); opacity: 0.6; margin: 0 0 1rem; }
.upload-done-btn { min-height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--button); color: var(--text); border: none; font-family: inherit; transition: background var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
.upload-done-btn:hover { background: var(--accent); color: var(--button-text); }
.upload-done-pending { font-size: 0.825rem; color: var(--text); opacity: 0.55; margin: 0; line-height: 1.5; }
.done-grid { background: rgba(32, 133, 221, 0.33); }
.upload-box[data-done="true"] { border: 1px solid var(--accent); }
.done-grid .upload-row { align-self: end; }

/* ===============================
   LOGIN
   =============================== */
.login-form {max-width: 800px; margin: auto; padding-bottom: 20px; border-bottom: 1px solid var(--border-grey);}
.pw-meter { width: 100%; height: 2px; background: var(--border-grey); overflow: hidden; margin-top: 6px; }
.pw-bar { height: 100%; width: 0%; transition: var(--transition-duration) var(--transition-easing); }
.pw-text { font-size: 0.75rem; margin-top: 6px; color: var(--text); opacity: 0.5; }
.login-info p { text-align: center; font-size: 0.75rem; }
.login-info a { text-decoration: underline; font-size: 0.75rem; }
.login-info { margin-bottom: 40px; }

/* ===============================
   ERROR PAGES
   =============================== */

.error-404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.error-404-inner { text-align: center; max-width: 420px; padding: 2rem 1.5rem; }
.error-code { font-size: 5rem; font-weight: 700; line-height: 1; margin: 0 0 1rem; opacity: 0.25; }
.error-title { font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--text); }
.error-text { opacity: 0.65; margin: 0 0 1.5rem; }
.error-anim::after { content: '.'; animation: dotAnim 1.5s infinite steps(3); }

@keyframes dotAnim { 
  0% {content: '.';} 
  33% {content: '...';} 
  66% {content: '.....';} 
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1024px) {
  .upload-grid { grid-template-columns: 1fr; }
  .upload-row,
  .upload-row-2,
  .upload-row-3,
  .plate-box { margin: 1rem 10px; }
  .form-grid { display: block; }
  .plate-preview-wrapper { margin: auto; }
  .upload-pics { margin: 0; }
  select, .upload-date { text-align-last: center; }
  .image-grid { grid-template-columns: repeat(2, 1fr) }
  .flatpickr-alt { text-align: center; }
}

@media (max-width: 767px) {
  .portfolio-row { flex-direction: column; }
  .logo { max-width: 200px; height:auto; pointer-events:none; }
  .sticky-head { flex-direction: column; align-items:center; }
  .sticky-logo { display:flex; justify-content:center; margin:20px 0 10px 0; }
  .navigation { text-align:center; font-size:14px; position:static; margin:0 0 10px 0; }
  .sticky-head img.logo { max-height:100%; }
  .navigation a, .navigation .a2, .photo-footer p { font-size:0.875rem; }
  footer.legal { padding:5px 15px 20px 15px; }
  .legal-page { padding:20px 15px; }
  .disclaimer-img img { max-width:100%; }
  .social-links { flex-direction:column; gap:15px; }
  .social-links a { text-align:center; }
  .spotting-form { margin-left:0; }
  .form-row { flex-direction:column; }
  .form-success, .spotting-form button[type="submit"], .spotting-form input[type="submit"] { margin-bottom:20px; }
  .intro-section { flex-direction:column; }
  .intro-image { order:2; max-width:100%; margin-top:1.5rem; }
  .intro-text { order:1; text-align:center; }
  .spot-top { grid-template-columns:1fr; text-align:center; position: relative; z-index: 10; }
  .spot-top-logo img { margin:0 auto; }
  .image-grid { grid-template-columns: repeat(1, 1fr) }
  .spot-main-content { flex-direction: column; }
  .spot-related { flex-direction: row; overflow-x:auto; gap:10px; }
  .spot-related .related-spot { flex:0 0 120px; }
  .spot-related > .related-spot:only-child { margin-left: auto; margin-right: auto; }
  .spot-top { flex-direction: column !important; align-items: center; text-align: center; }
  .spot-top-logo { margin-bottom: 20px; }
  .spot-top-divider { display: none; }
  .spot-top-info { align-items: center; }
  h1.spot_headline { text-align: center; }
  .info { flex-direction: column; }
  .info-row .info-overlay { padding: 10px; }
  .info-row { flex-direction: column; }
  .plate-pic { margin: auto; }
  .left-text { margin: 0 auto 0 auto }
  .spot-grey::before { background: radial-gradient( ellipse 100% 80% at 50% 100%, rgba(32, 133, 189, 0.6), rgba(32, 133, 189, 0) 100% ); }
  .label-tooltip { left: 50%; transform: translate(-50%, -6px); overflow-wrap: break-word; }
  .topspot-tooltip { max-width: inherit; margin-top: 5px; margin-left: 0; }
  .spot-images-column { max-width: 100%;}
  .search-grid, .search-grid-3 { grid-template-columns: 1fr; gap: 1.5rem; }
  .search-checkboxes { flex-direction: column; gap: 1.5rem; }
  .search-submit { width: 100%; }
  .search-actions { display: block; }
  .search-reset { display: block; text-align: center; padding-top: 1rem; max-width: 50%; margin: auto }
  .active-filters { display: grid; }
  .filter-tag { width: fit-content; }
  #headerbild .headerbild { height: 60vh; min-height: 400px; max-height: 600px; }
  #headerbild .headerbild img { transform: scale(1.15); }
  #headerbild .hero-caption { right: 15px; left: 15px; bottom: 80px; text-align: center; }
  #headerbild .hero-caption h1 { font-size: 2rem; }
  #headerbild .hero-caption .hero-meta { font-size: 1rem; }
  .hero-meta { text-align: center; }
  .page-over-hero { margin-top: calc(60vh - 60px); }
}

@media (max-width: 480px) {
  #headerbild .headerbild { height: 50vh; min-height: 350px; }
  #headerbild .hero-caption h1 { font-size: 1.5rem; }
  #headerbild .hero-caption .hero-meta { font-size: 0.875rem; }
  .page-over-hero { margin-top: calc(50vh - 60px); }
}

@media (hover: none) and (pointer: coarse) {
  .portfolio-pic .overlay { opacity:0; }
}

/* ===============================
   IMAGE PROTECTION
   =============================== */
.portfolio-pic img,
.image-item img,
.related-spot img,
.intro-image img,
.spot-main-image img,
.spot-additional-image img,
.spot-top-logo img,
.plate-pic img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}