/* Globale [hidden]-Regel: erzwingt display:none auch wenn ein anderer
Selektor (z.B. .btn { display: inline-flex }) spezifischer wäre.
!important hier ist okay weil das genau die Semantik des hidden-Attributs
ist und sonst kaum konsistent zu erreichen ist. */
[hidden] { display: none !important; }
:root {
--color-bg: #141414;
--color-bg-elevated: #1c1c1c;
--color-bg-card: #1f1f1f;
--color-bg-input: #262626;
--color-border: #2e2e2e;
--color-border-light: #3a3a3a;
--color-text: #f2f2f2;
--color-text-muted: #c5c5c5;
--color-text-dim: #8a8a8a;
--color-accent: #9146FF;
--color-accent-hover: #a970ff;
--color-accent-dim: #772ce8;
--color-danger: #e54b4b;
--color-success: #4ec07a;
--font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
--topbar-h: 68px;
--container: 1200px;
--radius: 10px;
--radius-sm: 6px;
--radius-lg: 16px;
--shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
--shadow: 0 6px 20px rgba(0,0,0,0.4);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
--shadow-accent: 0 8px 24px rgba(145, 70, 255, 0.25);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-accent-hover); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 .5em;
color: var(--color-text);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
p { margin: 0 0 1em; }
.main-content {
flex: 1;
width: 100%;
padding-top: var(--topbar-h);
}
body.is-fullscreen .main-content {
padding-top: 0;
position: relative;
height: 100vh;
overflow: hidden;
}
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--topbar-h);
background: rgba(31, 31, 31, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.25);
z-index: 9000;
}
.topbar__inner {
max-width: var(--container);
margin: 0 auto;
height: 100%;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 2rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-text);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.08em;
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.brand:hover { color: var(--color-text); }
.brand:hover .brand__logo { transform: translateY(-1px); }
.brand__accent { color: var(--color-accent); }
.brand__logo {
width: 40px;
height: 40px;
object-fit: contain;
flex-shrink: 0;
transition: transform .15s ease;
}
.brand__pin {
color: var(--color-accent);
font-size: 1.1em;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(145, 70, 255,0.35));
transition: transform .15s ease;
}
.mainnav { margin-left: auto; }
.mainnav__list {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: .4rem;
}
.mainnav__link {
color: var(--color-text-muted);
font-weight: 600;
font-size: 0.95rem;
padding: .5rem .8rem;
border-radius: var(--radius-sm);
transition: color .15s ease;
white-space: nowrap;
}
.mainnav__link:hover {
color: var(--color-text);
}
.mainnav__link.is-active {
color: var(--color-accent);
}
.usermenu {
display: flex;
gap: .5rem;
align-items: center;
}
.nav-toggle {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: .4rem;
}
.nav-toggle span {
display: block;
width: 24px; height: 2px;
background: var(--color-text);
margin: 5px 0;
transition: all .2s ease;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
padding: .75rem 1.4rem;
border-radius: var(--radius-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all .15s ease;
line-height: 1;
}
.btn--primary {
background: var(--color-accent);
color: #1a1a1a;
}
.btn--primary:hover {
background: var(--color-accent-hover);
color: #1a1a1a;
}
.btn--ghost {
background: rgba(255, 255, 255, 0.035);
color: var(--color-text);
border-color: rgba(255, 255, 255, 0.1);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: var(--color-text);
}
.btn--sm { padding: .5rem 1rem; font-size: 0.85rem; }
.btn--lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.hero__cta .btn--ghost {
background: rgba(20, 20, 20, 0.85);
border-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero__cta .btn--ghost:hover {
background: rgba(40, 40, 40, 0.9);
border-color: rgba(255, 255, 255, 0.25);
}
.hero {
position: relative;
padding: 5rem 1.5rem 4rem;
overflow: hidden;
isolation: isolate;
min-height: 580px;
display: flex;
align-items: center;
}
.hero__bg {
position: absolute; inset: 0;
z-index: 1;
background:
radial-gradient(circle at 20% 30%, rgba(145, 70, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(145, 70, 255, 0.08) 0%, transparent 50%),
linear-gradient(180deg, var(--color-bg) 0%, #0e0e0e 100%);
}
.hero__image {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.hero__inner {
position: relative;
z-index: 3;
max-width: var(--container);
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 3.5rem;
}
.hero__left { max-width: 560px; }
.hero__right { max-width: 480px; }
.hero__eyebrow {
display: inline-block;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1.1rem;
}
.hero__title {
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
line-height: 1.02;
margin-bottom: 0;
}
.hero__title-accent {
color: var(--color-accent);
}
.hero__text {
font-size: 1.1rem;
color: var(--color-text-muted);
margin: 0 0 1.8rem;
}
.hero__cta {
display: flex;
gap: .8rem;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.hero__cta .btn {
flex: 1 1 auto;
min-width: max-content;
justify-content: center;
white-space: nowrap;
padding-left: 2rem;
padding-right: 2rem;
}
.hero__notice {
font-size: 0.82rem;
color: var(--color-text-dim);
margin: 0;
}
@media (max-width: 960px) {
.hero { min-height: auto; padding: 4rem 1.25rem 3rem; }
.hero__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.hero__left, .hero__right { max-width: 100%; }
}
@media (max-width: 600px) {
.hero { padding: 3rem 1.25rem 2.5rem; }
.hero__cta {
flex-direction: column;
align-items: stretch;
gap: .6rem;
}
.hero__cta .btn {
width: 100%;
justify-content: center;
}
}
.features {
padding: 5rem 1.5rem;
background: var(--color-bg-elevated);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.features__inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.feature {
position: relative;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem 1.6rem;
overflow: hidden;
transition: border-color .25s ease, background .25s ease;
}
.feature::before {
content: '';
position: absolute;
top: 0;
left: 1.5rem;
right: 1.5rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
opacity: 0;
transition: opacity .25s ease;
}
.feature:hover {
border-color: rgba(145, 70, 255, 0.22);
background: #232323;
}
.feature:hover::before { opacity: 1; }
.feature__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(145, 70, 255, 0.08);
border: 1px solid rgba(145, 70, 255, 0.18);
border-radius: 12px;
color: var(--color-accent);
font-size: 1.2rem;
margin-bottom: 1.3rem;
transition: background .25s ease, border-color .25s ease;
}
.feature:hover .feature__icon {
background: rgba(145, 70, 255, 0.14);
border-color: rgba(145, 70, 255, 0.32);
}
.feature h3 {
margin-bottom: .55rem;
font-size: 1.2rem;
color: var(--color-text);
}
.feature p {
color: var(--color-text-muted);
margin: 0;
font-size: 0.93rem;
line-height: 1.65;
}
.cta-band {
padding: 5rem 1.5rem;
text-align: center;
background:
radial-gradient(circle at 50% 50%, rgba(145, 70, 255, 0.1) 0%, transparent 60%),
var(--color-bg);
}
.cta-band__inner { max-width: 600px; margin: 0 auto; }
.cta-band h2 { margin-bottom: .5rem; }
.cta-band p { color: var(--color-text-muted); margin-bottom: 1.8rem; }
.cta-band__buttons {
display: flex;
gap: .75rem;
flex-wrap: wrap;
justify-content: center;
}
.abo-actions {
display: flex;
gap: .75rem;
flex-wrap: wrap;
margin-top: 1.25rem;
}
@media (max-width: 600px) {
.cta-band { padding: 3.5rem 1.25rem; }
.cta-band__buttons {
flex-direction: column;
align-items: stretch;
}
.cta-band__buttons .btn {
width: 100%;
justify-content: center;
}
.abo-actions {
flex-direction: column;
align-items: stretch;
}
.abo-actions .btn {
width: 100%;
justify-content: center;
}
}
.site-footer {
background: #0e0e0e;
border-top: 1px solid var(--color-border);
padding: 3rem 1.5rem 1.5rem;
color: var(--color-text-muted);
}
.site-footer__inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.site-footer__title {
color: var(--color-accent);
font-size: 0.85rem;
letter-spacing: 0.15em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: .5rem;
}
.site-footer__title i { font-size: .9em; }
.site-footer__text { font-size: 0.9rem; line-height: 1.6; }
.site-footer__text--small { font-size: 0.8rem; color: var(--color-text-dim); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .4rem; }
.site-footer__list a {
color: var(--color-text-muted);
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: .5rem;
transition: color .15s ease;
}
.site-footer__list a i {
width: 14px;
text-align: center;
font-size: .85em;
color: var(--color-text-dim);
transition: color .15s ease;
}
.site-footer__list a:hover { color: var(--color-accent); }
.site-footer__list a:hover i { color: var(--color-accent); }
.site-footer__bottom {
max-width: var(--container);
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
font-size: 0.8rem;
color: var(--color-text-dim);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem 1.5rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__beta {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .35rem .8rem .35rem .35rem;
border: 1px solid rgba(145, 70, 255, 0.35);
background: rgba(145, 70, 255, 0.06);
border-radius: 999px;
color: var(--color-text-muted);
font-size: 0.78rem;
text-decoration: none;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.site-footer__beta:hover {
border-color: var(--color-accent);
background: rgba(145, 70, 255, 0.12);
color: var(--color-text);
}
.site-footer__beta-tag {
display: inline-block;
padding: .12rem .55rem;
border-radius: 999px;
background: var(--color-accent);
color: #1a1a1a;
font-weight: 800;
font-size: 0.7rem;
letter-spacing: 0.12em;
line-height: 1.2;
}
.site-footer__beta-text { white-space: nowrap; }
@media (max-width: 640px) {
.site-footer__bottom { justify-content: center; text-align: center; }
}
.auth-page {
min-height: calc(100vh - var(--topbar-h));
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
background:
radial-gradient(circle at 50% 0%, rgba(145, 70, 255, 0.08) 0%, transparent 60%),
var(--color-bg);
}
.auth-card {
width: 100%;
max-width: 420px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
box-shadow: var(--shadow-lg);
}
.auth-card h1 {
font-size: 1.3rem;
line-height: 1.25;
margin-bottom: .3rem;
letter-spacing: -0.01em;
}
.auth-card__sub { color: var(--color-text-muted); margin-bottom: 2rem; }
.auth-card__foot {
margin-top: 1.5rem;
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: block; }
.field__label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: .4rem;
color: var(--color-text-muted);
letter-spacing: 0.03em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
width: 100%;
padding: .8rem 1rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
transition: border-color .15s ease;
}
.field input:focus {
outline: none;
border-color: var(--color-accent);
}
.field-check {
display: flex;
gap: .6rem;
align-items: flex-start;
font-size: 0.9rem;
color: var(--color-text-muted);
cursor: pointer;
}
.field-check input { margin-top: 3px; accent-color: var(--color-accent); }
.premium-page { padding: 4rem 1.5rem; }
.premium-page__inner { max-width: var(--container); margin: 0 auto; }
.page-header { text-align: center; margin-bottom: 3rem; }
.page-header h1,
.page-header h2 {
font-size: 2rem;
line-height: 1.2;
margin: 0 0 0.6rem;
}
.page-header__eyebrow {
display: inline-block;
color: var(--color-accent);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: .8rem;
}
.page-header p { color: var(--color-text-muted); }
.price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
max-width: 720px;
margin: 0 auto;
}
.price-card {
position: relative;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2.2rem 1.8rem;
display: flex;
flex-direction: column;
}
.price-card--featured {
border-color: var(--color-accent);
box-shadow: var(--shadow-accent);
}
.price-card__badge {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: #1a1a1a;
padding: .3rem .8rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.price-card__title {
text-align: center;
color: var(--color-text-muted);
font-size: 1rem;
letter-spacing: 0.15em;
margin-bottom: 1rem;
}
.price-card__price { text-align: center; margin-bottom: 1.5rem; }
.price-card__amount {
font-family: var(--font-display);
font-size: 3rem;
color: var(--color-text);
}
.price-card__unit {
color: var(--color-text-muted);
font-size: 0.9rem;
margin-left: .3rem;
}
.price-card__save {
text-align: center;
color: var(--color-success);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
}
.price-card__features {
list-style: none;
padding: 0; margin: 0 0 1.8rem;
flex: 1;
}
.price-card__features li {
padding: .5rem 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.92rem;
color: var(--color-text-muted);
}
.price-card__features li:last-child { border-bottom: none; }
.price-card__features li::before {
content: '✓';
color: var(--color-accent);
font-weight: 700;
margin-right: .5rem;
}
.price-card__features li.price-card__feature--off::before {
content: '✗';
color: var(--color-text-muted);
}
.price-card__features li.price-card__feature--off {
opacity: 0.5;
}
.leaflet-map {
position: fixed;
top: var(--topbar-h);
left: 0; right: 0; bottom: 0;
z-index: 1;
background: #1a1a1a;
}
.leaflet-control-zoom a {
background: var(--color-bg-card) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
.leaflet-control-zoom a:hover {
background: var(--color-bg-elevated) !important;
color: var(--color-accent) !important;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: var(--color-bg-card) !important;
color: var(--color-text) !important;
border: 1px solid var(--color-border);
}
.map-overlay {
position: fixed;
z-index: 500;
pointer-events: none;
}
.map-overlay > * { pointer-events: auto; }
.map-overlay--top-center {
top: calc(var(--topbar-h) + 1.25rem);
left: 50%;
transform: translateX(-50%);
width: min(560px, calc(100vw - 2rem));
}
.map-search {
position: relative;
display: flex;
align-items: center;
background: rgba(20, 20, 20, 0.35);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
transition: border-color .15s ease, background .15s ease;
}
.map-search:hover,
.map-search:focus-within {
border-color: rgba(145, 70, 255, 0.4);
background: rgba(20, 20, 20, 0.55);
}
.map-search__icon {
color: var(--color-text-muted);
margin-left: 1.1rem;
font-size: 0.95rem;
pointer-events: none;
transition: color .15s ease;
}
.map-search:focus-within .map-search__icon {
color: var(--color-accent);
}
.map-search__input {
flex: 1;
background: transparent;
border: 0;
color: var(--color-text);
padding: .9rem 1.1rem .9rem .75rem;
font-family: var(--font-body);
font-size: 0.95rem;
}
.map-search__input::placeholder {
color: var(--color-text-muted);
}
.map-search__input:focus { outline: none; }
.error-page {
min-height: calc(100vh - var(--topbar-h));
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
text-align: center;
}
.error-page__code {
font-family: var(--font-display);
font-size: clamp(6rem, 20vw, 12rem);
color: var(--color-accent);
line-height: 1;
display: block;
text-shadow: 0 0 40px rgba(145, 70, 255, 0.3);
}
.error-page p { color: var(--color-text-muted); margin-bottom: 2rem; }
.text-page {
max-width: 800px;
margin: 0 auto;
padding: 3rem 1.5rem;
}
.text-page h2 { margin-top: 2rem; }
@media (max-width: 1100px) {
.nav-toggle { display: block; order: 3; }
.mainnav {
position: absolute;
top: var(--topbar-h);
left: 0; right: 0;
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
margin-left: 0;
}
.mainnav.is-open {
max-height: calc(100vh - var(--topbar-h));
overflow-y: auto;
}
.mainnav__list {
flex-direction: column;
padding: 1rem;
gap: 0;
}
.mainnav__link {
display: block;
padding: .8rem 1rem;
}
.topbar__inner {
gap: 0 !important;
padding: 0 .9rem !important;
}
.usermenu {
margin-left: auto;
gap: .35rem;
}
.nav-toggle {
margin-left: .35rem;
}
.notif-dropdown__panel {
position: fixed !important;
top: calc(var(--topbar-h) + 6px) !important;
left: .5rem !important;
right: .5rem !important;
width: auto !important;
max-width: none !important;
max-height: calc(100vh - var(--topbar-h) - 1.5rem) !important;
}
}
@media (max-width: 860px) {
.usermenu__premium {
display: none;
}
}
@media (max-width: 480px) {
.brand__text { font-size: 0.95rem; }
.brand__logo { width: 34px; height: 34px; }
.hero { padding: 4rem 1rem 3rem; }
.map-overlay--top-left { max-width: none; }
}
.auth-split {
min-height: calc(100vh - var(--topbar-h));
display: grid;
grid-template-columns: 1fr 1fr;
}
.auth-split__visual {
position: relative;
overflow: hidden;
background: #0a0a0a;
color: var(--color-text);
}
.auth-visual {
position: relative;
z-index: 2;
height: 100%;
min-height: 100vh;
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.auth-split__visual::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(circle at 25% 20%, rgba(145, 70, 255, 0.25) 0%, transparent 50%),
radial-gradient(circle at 75% 80%, rgba(145, 70, 255, 0.12) 0%, transparent 55%),
linear-gradient(135deg, #1a1207 0%, #0a0a0a 60%, #050505 100%);
}
/* Grid-Pattern entfernt – stört bei Foto-Hintergrund */
/* Optionales Foto-Hintergrundbild für Login & Register.
Wird per Modifier-Klasse pro Seite gesetzt. Liegt zwischen dem Verlauf (::before)
und dem Grid-Pattern (::after), aber unter dem Text (.auth-visual z-index:2).
Über pointer-events:none damit nichts geklickt werden kann.
mask-image sorgt für sanften Fade zur rechten Kante so dass der Übergang
zur Formular-Seite weich wirkt. */
.auth-split__visual--login .auth-split__bg,
.auth-split__visual--register .auth-split__bg {
position: absolute;
inset: 0;
z-index: 1; /* gleiche Ebene wie Verlauf/Grid */
background-position: top left;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.38; /* nicht zu dominant – Text soll lesbar bleiben */
mix-blend-mode: lighten;
pointer-events: none;
/* Sanfter Fade nach rechts (zur Formular-Seite hin) und nach unten */
mask-image: linear-gradient(135deg, black 0%, black 50%, transparent 95%);
-webkit-mask-image: linear-gradient(135deg, black 0%, black 50%, transparent 95%);
}
.auth-split__visual--login .auth-split__bg {
background-image: url('../img/login.png');
}
.auth-split__visual--register .auth-split__bg {
background-image: url('../img/register.png');
}
.auth-visual__brand {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--color-text);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.08em;
text-decoration: none;
line-height: 1;
}
.auth-visual__brand:hover { color: var(--color-text); }
.auth-visual__content { max-width: 420px; }
.auth-visual__eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1rem;
padding: .4rem .8rem;
background: rgba(145, 70, 255, 0.1);
border: 1px solid rgba(145, 70, 255, 0.3);
border-radius: 100px;
}
.auth-visual__title {
font-size: clamp(2.4rem, 4vw, 3.4rem);
line-height: 1.05;
margin-bottom: 1.4rem;
}
.auth-visual__text {
color: var(--color-text-muted);
font-size: 1.05rem;
margin-bottom: 2rem;
}
.auth-visual__bullets {
list-style: none;
padding: 0; margin: 0;
}
.auth-visual__bullets li {
display: flex;
align-items: center;
gap: .7rem;
padding: .55rem 0;
color: var(--color-text-muted);
font-size: 0.98rem;
}
.auth-visual__bullets .check {
flex-shrink: 0;
width: 22px; height: 22px;
background: rgba(145, 70, 255, 0.15);
color: var(--color-accent);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
}
.auth-visual__foot {
color: var(--color-text-dim);
font-size: 0.82rem;
margin: 0;
}
.auth-split__form {
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
overflow-y: auto;
}
.auth-form-wrap {
width: 100%;
max-width: 420px;
}
.auth-back {
display: inline-block;
color: var(--color-text-muted);
font-size: 0.88rem;
text-decoration: none;
margin-bottom: 2rem;
transition: color .15s ease;
}
.auth-back:hover { color: var(--color-accent); }
.auth-header { margin-bottom: 2rem; }
.auth-header h1 {
font-size: 1.6rem;
line-height: 1.2;
margin-bottom: .3rem;
letter-spacing: -0.015em;
}
.auth-header p { color: var(--color-text-muted); margin: 0; }
.form-modern {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.field-modern { display: block; }
.field-modern label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: .45rem;
color: var(--color-text);
letter-spacing: 0.02em;
}
.field-modern__row {
position: relative;
}
.field-modern__row input {
width: 100%;
padding: .9rem 1rem .9rem 2.7rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
transition: border-color .15s ease, background .15s ease;
}
.field-modern--password .field-modern__row input { padding-right: 3rem; }
.field-modern__row input::placeholder { color: var(--color-text-dim); }
.field-modern__row input:hover { border-color: var(--color-border-light); }
.field-modern__row input:focus {
outline: none;
border-color: var(--color-accent);
background: #2a2a2a;
}
.field-modern__icon {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: var(--color-text-dim);
pointer-events: none;
font-size: 0.95rem;
transition: color .15s ease;
width: 1em;
text-align: center;
}
.field-modern__row input:focus ~ .field-modern__icon {
color: var(--color-accent);
}
.field-modern__toggle {
position: absolute;
top: 50%;
right: .35rem;
transform: translateY(-50%);
background: none;
border: 0;
color: var(--color-text-dim);
padding: .55rem .7rem;
cursor: pointer;
border-radius: var(--radius-sm);
transition: color .15s ease, background .15s ease;
font-size: 0.95rem;
}
.field-modern__toggle:hover {
color: var(--color-accent);
background: rgba(255,255,255,0.04);
}
.field-modern__row input:-webkit-autofill,
.field-modern__row input:-webkit-autofill:hover,
.field-modern__row input:-webkit-autofill:focus,
.field-modern__row input:-webkit-autofill:active {
-webkit-text-fill-color: var(--color-text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--color-bg-input) inset !important;
box-shadow: 0 0 0 1000px var(--color-bg-input) inset !important;
caret-color: var(--color-text) !important;
transition: background-color 9999s ease-in-out 0s;
border-color: var(--color-border);
}
.field-modern__row input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
box-shadow: 0 0 0 1000px #2a2a2a inset !important;
border-color: var(--color-accent);
}
.field-hint {
display: block;
margin-top: .4rem;
font-size: 0.78rem;
color: var(--color-text-dim);
line-height: 1.4;
}
.field-hint.is-error { color: var(--color-danger); }
.field-hint.is-ok { color: var(--color-success); }
.pw-strength {
max-height: 0;
margin-top: 0;
overflow: hidden;
transition: max-height .25s ease, margin-top .25s ease, opacity .2s ease;
opacity: 0;
}
.field-modern:focus-within .pw-strength,
.field-modern:has(input:not(:placeholder-shown)) .pw-strength {
max-height: 80px;
margin-top: .65rem;
opacity: 1;
}
.pw-strength__bar {
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 100px;
overflow: hidden;
margin-bottom: .45rem;
}
.pw-strength__bar span {
display: block;
height: 100%;
width: 0%;
background: var(--color-danger);
transition: width .25s ease, background .25s ease;
border-radius: 100px;
}
.pw-strength__label {
font-size: 0.78rem;
color: var(--color-text-dim);
}
.pw-strength[data-level="1"] .pw-strength__bar span { width: 25%; background: #e54b4b; }
.pw-strength[data-level="2"] .pw-strength__bar span { width: 50%; background: #9146FF; }
.pw-strength[data-level="3"] .pw-strength__bar span { width: 75%; background: #a4c043; }
.pw-strength[data-level="4"] .pw-strength__bar span { width: 100%; background: #4ec07a; }
.form-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
margin-top: -.3rem;
}
.check-inline {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: 0.9rem;
color: var(--color-text-muted);
cursor: pointer;
}
.check-inline--block {
display: flex;
align-items: flex-start;
line-height: 1.5;
}
.check-inline input[type="checkbox"] {
accent-color: var(--color-accent);
width: 16px; height: 16px;
margin-top: 2px;
flex-shrink: 0;
}
.link-muted {
font-size: 0.88rem;
color: var(--color-text-muted);
}
.link-muted:hover { color: var(--color-accent); }
.link-accent {
color: var(--color-accent);
font-weight: 600;
}
.form-divider {
display: flex;
align-items: center;
gap: 1rem;
color: var(--color-text-dim);
font-size: 0.85rem;
margin: .3rem 0;
}
.form-divider::before,
.form-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
.form-foot {
text-align: center;
color: var(--color-text-muted);
margin: 1rem 0 0;
font-size: 0.92rem;
}
@media (max-width: 960px) {
.auth-split { grid-template-columns: 1fr; }
.auth-split__visual {
min-height: auto;
padding: 2rem 1.5rem 3rem;
}
.auth-visual {
min-height: auto;
padding: 0;
gap: 2rem;
}
.auth-visual__title { font-size: 2rem; }
.auth-visual__bullets { display: none; }
.auth-visual__foot { display: none; }
}
@media (max-width: 480px) {
.auth-split__visual { padding: 1.5rem 1.25rem 2rem; }
.auth-split__form { padding: 1.5rem 1.25rem; }
.auth-visual__content { max-width: 100%; }
}
.mainnav__link {
display: inline-flex;
align-items: center;
gap: .55rem;
}
.mainnav__icon {
font-size: 0.9rem;
color: var(--color-text-dim);
transition: color .15s ease;
width: 1.1em;
text-align: center;
}
.mainnav__link:hover .mainnav__icon,
.mainnav__link.is-active .mainnav__icon {
color: var(--color-accent);
}
.urbex-marker {
background: transparent !important;
border: none !important;
text-align: center;
line-height: 1;
}
.urbex-marker__pin {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(145, 70, 255, 0.85);
border-radius: 50%;
box-shadow:
0 0 0 5px rgba(145, 70, 255, 0.16),
0 2px 8px rgba(0, 0, 0, 0.25);
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.urbex-marker__pin i {
color: #1a1a1a;
font-size: 11px;
}
.urbex-marker:hover .urbex-marker__pin {
background: var(--color-accent);
box-shadow:
0 0 0 9px rgba(145, 70, 255, 0.22),
0 4px 14px rgba(0, 0, 0, 0.35);
}
.leaflet-popup-content {
margin: .9rem 1rem !important;
font-family: var(--font-body);
color: var(--color-text);
font-size: 0.92rem;
}
.leaflet-popup-content strong {
color: var(--color-accent);
display: block;
margin-bottom: .25rem;
font-size: 0.98rem;
}
.leaflet-popup-content-wrapper {
border-radius: var(--radius) !important;
}
.leaflet-container a.leaflet-popup-close-button {
color: var(--color-text-muted) !important;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: var(--color-accent) !important;
}
.usermenu .btn i {
font-size: 0.85rem;
}
@media (max-width: 720px) {
.usermenu .btn span { display: none; }
.usermenu .btn { padding-left: .7rem; padding-right: .7rem; }
.usermenu .btn i { font-size: 1rem; }
}
html { scroll-behavior: smooth; }
.legal-page {
display: grid;
grid-template-columns: 320px 1fr;
gap: 3rem;
max-width: var(--container);
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
align-items: start;
}
.legal-page__sidebar {
position: sticky;
top: calc(var(--topbar-h) + 1.5rem);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.legal-contact {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.6rem;
}
.legal-contact__eyebrow {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: .9rem;
}
.legal-contact__name {
font-family: var(--font-display);
font-size: 1.45rem;
letter-spacing: 0.03em;
color: var(--color-text);
margin: 0 0 .8rem;
line-height: 1.1;
}
.legal-contact__addr {
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0 0 1.2rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--color-border);
}
.legal-contact__links {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: .55rem;
}
.legal-contact__links li {
display: flex;
align-items: center;
gap: .6rem;
font-size: 0.88rem;
color: var(--color-text-muted);
}
.legal-contact__links i {
color: var(--color-accent);
width: 1.1em;
text-align: center;
flex-shrink: 0;
}
.legal-contact__links a {
color: var(--color-text-muted);
text-decoration: none;
word-break: break-all;
transition: color .15s ease;
}
.legal-contact__links a:hover { color: var(--color-accent); }
.legal-toc {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.4rem 1.6rem;
}
.legal-toc__title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 .8rem;
}
.legal-toc ol {
list-style: none;
margin: 0; padding: 0;
counter-reset: toc;
}
.legal-toc li {
counter-increment: toc;
}
.legal-toc a {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .45rem .2rem;
font-size: 0.88rem;
color: var(--color-text-muted);
border-left: 2px solid transparent;
padding-left: .8rem;
margin-left: -.2rem;
transition: color .15s ease, border-color .15s ease, background .15s ease;
text-decoration: none;
line-height: 1.35;
}
.legal-toc a::before {
content: counter(toc, decimal-leading-zero);
color: var(--color-text-dim);
font-variant-numeric: tabular-nums;
font-size: 0.78rem;
font-weight: 600;
margin-top: 1px;
flex-shrink: 0;
}
.legal-toc a:hover {
color: var(--color-text);
background: rgba(255,255,255,0.03);
}
.legal-toc a.is-active {
color: var(--color-accent);
border-left-color: var(--color-accent);
background: rgba(145, 70, 255, 0.05);
}
.legal-toc a.is-active::before { color: var(--color-accent); }
.legal-page__content {
min-width: 0;
max-width: 760px;
}
.legal-page__content h1 {
margin-bottom: .3rem;
}
.legal-page__content .legal-meta {
color: var(--color-text-dim);
font-size: 0.85rem;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-border);
}
.legal-page__content h2 {
margin-top: 2.5rem;
margin-bottom: .8rem;
scroll-margin-top: calc(var(--topbar-h) + 1.5rem);
font-size: 1.5rem;
color: var(--color-text);
}
.legal-page__content h2:first-of-type { margin-top: 0; }
.legal-page__content h3 {
margin-top: 1.5rem;
margin-bottom: .5rem;
font-size: 1.1rem;
color: var(--color-accent);
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.legal-page__content p {
color: var(--color-text-muted);
line-height: 1.7;
}
.legal-page__content ul {
color: var(--color-text-muted);
padding-left: 1.3rem;
line-height: 1.7;
}
.legal-page__content ul li { margin-bottom: .3rem; }
.legal-page__content strong { color: var(--color-text); }
.legal-page__content a { word-break: break-word; }
@media (max-width: 960px) {
.legal-page {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 1.25rem 3rem;
}
.legal-page__sidebar {
position: static;
}
.legal-toc {
padding: 1rem 1.2rem;
}
}
.site-footer__brand {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--color-text);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.08em;
text-decoration: none;
margin-bottom: .9rem;
line-height: 1;
}
.site-footer__brand:hover { color: var(--color-text); }
.form-alert {
display: flex;
align-items: flex-start;
gap: .65rem;
padding: .85rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid;
font-size: 0.92rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.form-alert i { font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }
.form-alert--error {
background: rgba(229, 75, 75, 0.07);
border-color: rgba(229, 75, 75, 0.35);
color: #fca5a5;
}
.form-alert--success {
background: rgba(78, 192, 122, 0.07);
border-color: rgba(78, 192, 122, 0.35);
color: #86efac;
}
.info-page {
min-height: calc(100vh - var(--topbar-h));
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
}
.info-page::before {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(145, 70, 255, 0.06) 0%, transparent 70%);
top: -200px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.info-card {
position: relative;
text-align: center;
max-width: 440px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem 2rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.info-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
font-size: 1.6rem;
margin-bottom: 1.2rem;
border: 2px solid;
}
.info-card__icon--success {
background: rgba(78, 192, 122, 0.12);
color: var(--color-success);
border-color: rgba(78, 192, 122, 0.4);
}
.info-card__icon--error {
background: rgba(229, 75, 75, 0.12);
color: var(--color-danger);
border-color: rgba(229, 75, 75, 0.4);
}
.info-card h1 {
font-size: 1.5rem;
line-height: 1.25;
letter-spacing: -0.015em;
margin-bottom: .5rem;
}
.info-card p {
color: var(--color-text-muted);
margin-bottom: 1.5rem;
font-size: .95rem;
line-height: 1.55;
}
.user-dropdown {
position: relative;
}
.user-dropdown__trigger {
display: inline-flex;
align-items: center;
gap: .65rem;
padding: .25rem .9rem .25rem .25rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--color-text);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
font-family: var(--font-body);
font-size: 0.93rem;
}
.user-dropdown__trigger:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(145, 70, 255, 0.3);
}
.user-dropdown.is-open .user-dropdown__trigger {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(145, 70, 255, 0.4);
}
.user-dropdown__name {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.user-dropdown__chevron {
font-size: 0.7rem;
color: var(--color-text-muted);
transition: transform .2s ease;
}
.user-dropdown.is-open .user-dropdown__chevron {
transform: rotate(180deg);
}
.user-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-accent) 0%, #772ce8 100%);
color: #1a1a1a;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.03em;
flex-shrink: 0;
overflow: hidden;
box-sizing: border-box;
padding: 0;
}
.user-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
margin: 0;
padding: 0;
border: 0;
}
.user-avatar--lg {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
max-width: 48px;
max-height: 48px;
font-size: 1.05rem;
}
.user-avatar--image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.user-avatar-photo {
display: block;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
object-fit: cover;
object-position: center;
border-radius: var(--radius-sm);
border: 0;
margin: 0;
padding: 0;
flex-shrink: 0;
vertical-align: middle;
background: transparent;
}
.user-dropdown__panel {
position: absolute;
top: calc(100% + 16px);
right: 0;
min-width: 280px;
background: #1a1a1a;
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 1100;
}
.user-dropdown.is-open .user-dropdown__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown__header {
display: flex;
align-items: center;
gap: .8rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--color-border);
}
.user-dropdown__info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.user-dropdown__info strong {
color: var(--color-text);
font-size: 0.95rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown__info span {
color: var(--color-text-muted);
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown__status {
display: flex;
align-items: center;
justify-content: space-between;
padding: .65rem 1.1rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}
.user-dropdown__status strong {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
}
.user-dropdown__status span {
color: var(--color-text-muted);
font-size: 0.78rem;
}
.user-dropdown__status--trial strong { color: var(--color-accent); }
.user-dropdown__status--active strong { color: var(--color-success); }
.user-dropdown__status--expired strong { color: var(--color-danger); }
.user-dropdown__list {
list-style: none;
margin: 0;
padding: .35rem 0;
}
.user-dropdown__list a {
display: flex;
align-items: center;
gap: .75rem;
padding: .65rem 1.1rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.9rem;
transition: background .12s ease, color .12s ease;
}
.user-dropdown__list a:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--color-text);
}
.user-dropdown__list a i {
width: 1.1em;
text-align: center;
color: var(--color-text-dim);
font-size: 0.85rem;
}
.user-dropdown__list a:hover i {
color: var(--color-accent);
}
.user-dropdown__footer {
border-top: 1px solid var(--color-border);
}
.user-dropdown__footer a {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem 1.1rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.9rem;
transition: background .12s ease, color .12s ease;
}
.user-dropdown__footer a:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--color-text);
}
.user-dropdown__footer a i { font-size: 0.85rem; }
@media (max-width: 720px) {
.user-dropdown__name,
.user-dropdown__chevron { display: none; }
.user-dropdown__trigger {
padding: 0;
border: 0;
background: transparent;
border-radius: var(--radius-sm);
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
max-width: 40px;
max-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.user-dropdown__trigger:hover,
.user-dropdown.is-open .user-dropdown__trigger {
background: rgba(255, 255, 255, 0.04);
border: 0;
}
.user-dropdown__panel { right: -8px; min-width: 260px; }
}
.usercp {
display: grid;
grid-template-columns: 280px 1fr;
gap: 1.75rem;
max-width: var(--container);
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
align-items: start;
}
.usercp__sidebar {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
position: sticky;
top: calc(var(--topbar-h) + 1rem);
}
.usercp__sidebar-profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.75rem 1.25rem 1.4rem;
border-bottom: 1px solid var(--color-border);
}
.usercp__sidebar-name {
color: var(--color-text);
font-size: 1.05rem;
margin-top: 1rem;
word-break: break-word;
}
.usercp__sidebar-email {
color: var(--color-text-muted);
font-size: 0.82rem;
margin-top: 0.25rem;
word-break: break-all;
}
.usercp__sidebar-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1rem;
padding: .35rem .7rem;
border-radius: 100px;
font-size: 0.74rem;
background: rgba(255,255,255,0.04);
}
.usercp__sidebar-badge strong {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.68rem;
font-weight: 700;
}
.usercp__sidebar-badge span { color: var(--color-text-muted); }
.usercp__sidebar-badge--trial strong { color: var(--color-accent); }
.usercp__sidebar-badge--trial { background: rgba(145, 70, 255,0.1); }
.usercp__sidebar-badge--active strong { color: var(--color-success); }
.usercp__sidebar-badge--active { background: rgba(78,192,122,0.1); }
.usercp__sidebar-badge--expired strong { color: var(--color-danger); }
.usercp__sidebar-badge--expired { background: rgba(229,75,75,0.1); }
.user-avatar--xl {
width: 72px;
height: 72px;
font-size: 1.55rem;
border-radius: var(--radius-sm);
}
.usercp__sidebar-nav { padding: .5rem 0; }
.usercp__sidebar-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.usercp__sidebar-divider {
height: 1px;
background: var(--color-border);
margin: .5rem 0;
}
.usercp__sidebar-link {
display: flex;
align-items: center;
gap: .8rem;
padding: .7rem 1.1rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.9rem;
border-left: 2px solid transparent;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.usercp__sidebar-link i {
width: 1.1em;
text-align: center;
color: var(--color-text-dim);
font-size: 0.92rem;
}
.usercp__sidebar-link:hover {
background: rgba(255,255,255,0.03);
color: var(--color-text);
}
.usercp__sidebar-link:hover i {
color: var(--color-accent);
}
.usercp__sidebar-link.is-active {
background: rgba(145, 70, 255,0.07);
color: var(--color-text);
border-left-color: var(--color-accent);
}
.usercp__sidebar-link.is-active i {
color: var(--color-accent);
}
.usercp__sidebar-link.is-disabled {
color: var(--color-text-dim);
cursor: default;
}
.usercp__sidebar-link.is-disabled i { color: var(--color-text-dim); }
.usercp__sidebar-link small {
margin-left: auto;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-dim);
background: rgba(255,255,255,0.04);
padding: .15rem .45rem;
border-radius: 4px;
}
.usercp__sidebar-link--admin i { color: #f87171; }
.usercp__sidebar-link--admin:hover i { color: #fca5a5; }
.usercp__sidebar-link--logout:hover {
background: rgba(229,75,75,0.07);
color: #fca5a5;
}
.usercp__sidebar-link--logout:hover i { color: #fca5a5; }
.usercp__sidebar-foot {
border-top: 1px solid var(--color-border);
padding: .5rem 0;
}
.usercp__main {
min-width: 0;
}
.usercp__head,
.usercp__main-head {
margin-bottom: 1.75rem;
}
.usercp__head h1,
.usercp__main-head h1 {
margin: 0 0 .35rem 0;
font-size: 2rem;
font-family: var(--font-display);
line-height: 1.2;
}
.usercp__head p,
.usercp__main-head p {
color: var(--color-text-muted);
margin: 0;
font-size: 0.95rem;
}
.usercp__head strong,
.usercp__main-head strong {
color: var(--color-text);
}
.usercp__banner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-radius: var(--radius);
border: 1px solid;
margin-bottom: 1.75rem;
}
.usercp__banner > i {
font-size: 1.3rem;
flex-shrink: 0;
}
.usercp__banner > div {
flex: 1;
display: flex;
flex-direction: column;
gap: .15rem;
}
.usercp__banner strong { color: var(--color-text); font-size: 0.95rem; }
.usercp__banner span { color: var(--color-text-muted); font-size: 0.85rem; }
.usercp__banner--trial {
background: rgba(145, 70, 255,0.06);
border-color: rgba(145, 70, 255,0.25);
}
.usercp__banner--trial > i { color: var(--color-accent); }
.usercp__banner--expired {
background: rgba(229,75,75,0.06);
border-color: rgba(229,75,75,0.3);
}
.usercp__banner--expired > i { color: var(--color-danger); }
.usercp__banner--active {
background: rgba(78,192,122,0.06);
border-color: rgba(78,192,122,0.3);
}
.usercp__banner--active > i { color: var(--color-success); }
.usercp__grid {
display: grid;
gap: 1.1rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.usercp__card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.4rem 1.5rem;
text-decoration: none;
display: flex;
flex-direction: column;
transition: border-color .15s ease, background .15s ease;
}
a.usercp__card:hover {
border-color: rgba(145, 70, 255,0.35);
background: #1f1f1f;
}
.usercp__card.is-disabled {
opacity: 0.55;
}
.usercp__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
font-size: 1.05rem;
margin-bottom: .9rem;
}
.usercp__card h3 {
margin: 0 0 .3rem 0;
font-size: 1.05rem;
color: var(--color-text);
}
.usercp__card p {
color: var(--color-text-muted);
font-size: 0.88rem;
line-height: 1.5;
margin: 0 0 1rem 0;
flex: 1;
}
.usercp__card-link {
color: var(--color-accent);
font-size: 0.85rem;
font-weight: 500;
}
.usercp__card.is-disabled .usercp__card-link {
color: var(--color-text-dim);
}
.usercp__section {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.5rem 1.75rem;
margin-bottom: 1.25rem;
}
.usercp__section-head {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.usercp__section-head h2 {
margin: 0 0 .25rem 0;
font-size: 1.1rem;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0;
color: var(--color-text);
}
.usercp__section-head p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.abo-status {
display: flex;
align-items: flex-start;
gap: 1.2rem;
margin-bottom: 1.5rem;
}
.abo-status__icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.abo-status__icon--trial { background: rgba(145, 70, 255,0.12); color: var(--color-accent); }
.abo-status__icon--active { background: rgba(78,192,122,0.12); color: var(--color-success); }
.abo-status__icon--expired { background: rgba(229,75,75,0.12); color: var(--color-danger); }
.abo-status__info strong {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.7rem;
color: var(--color-text-muted);
display: block;
margin-bottom: .3rem;
}
.abo-status__info h2 {
margin: 0 0 .4rem 0;
font-size: 1.6rem;
line-height: 1.2;
}
.abo-status__info p {
color: var(--color-text-muted);
font-size: 0.92rem;
margin: 0;
line-height: 1.5;
}
.empty-state {
text-align: center;
padding: 2.5rem 1rem;
color: var(--color-text-muted);
}
.empty-state i {
font-size: 2rem;
color: var(--color-text-dim);
margin-bottom: .75rem;
display: block;
}
.empty-state p {
margin: 0 0 .25rem 0;
color: var(--color-text);
font-size: 0.95rem;
}
.empty-state small {
font-size: 0.8rem;
color: var(--color-text-dim);
}
@media (max-width: 860px) {
.usercp {
grid-template-columns: 1fr;
gap: 1.2rem;
padding: 1.25rem 1rem 3rem;
}
.usercp__sidebar {
position: static;
}
.usercp__sidebar-profile {
flex-direction: row;
text-align: left;
gap: 1rem;
padding: 1rem 1.2rem;
}
.usercp__sidebar-name { margin-top: 0; }
.usercp__sidebar-badge { margin-top: .35rem; align-self: flex-start; }
.usercp__head h1 { font-size: 1.5rem; }
}
.usercp__h2 {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
margin: 0 0 .9rem 0;
}
.usercp__h2:not(:first-child) {
margin-top: 1.75rem;
}
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1rem;
margin-bottom: .25rem;
}
.stat {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
}
.stat__icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(145, 70, 255, 0.1);
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.stat__body {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.stat__body strong {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 400;
color: var(--color-text);
letter-spacing: 0.02em;
line-height: 1;
}
.stat__body span {
color: var(--color-text-muted);
font-size: 0.82rem;
margin-top: .25rem;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) {
.usermenu__premium span { display: none; }
.usermenu__premium {
padding: .5rem .75rem;
}
}
.premium-note {
display: flex;
align-items: flex-start;
gap: .75rem;
max-width: 880px;
margin: 0 auto 2.5rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.92rem;
line-height: 1.55;
}
.premium-note i {
color: var(--color-accent);
margin-top: 2px;
flex-shrink: 0;
}
.premium-note strong { color: var(--color-text); }
.premium-foot {
text-align: center;
margin-top: 2.5rem;
color: var(--color-text-dim);
font-size: 0.88rem;
}
.btn.is-disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.submit-page {
padding: 3rem 1.5rem 4rem;
}
.submit-page__inner {
max-width: 880px;
margin: 0 auto;
}
.submit-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.submit-info__item {
display: flex;
gap: .9rem;
padding: 1rem 1.1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.submit-info__item i {
color: var(--color-accent);
font-size: 1.2rem;
margin-top: 2px;
}
.submit-info__item strong {
display: block;
font-size: .92rem;
margin-bottom: .15rem;
}
.submit-info__item span {
display: block;
color: var(--color-text-muted);
font-size: .82rem;
line-height: 1.4;
}
.submit-form {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2rem;
}
.submit-form .req { color: var(--color-accent); }
.field-modern__icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-dim);
font-size: .95rem;
pointer-events: none;
}
.field-modern__row select,
.field-modern__row textarea {
width: 100%;
padding: .9rem 1rem .9rem 2.7rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
appearance: none;
-webkit-appearance: none;
}
.field-modern__row select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8a8a8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}
.field-modern__row--textarea i {
top: 1rem;
transform: none;
}
.field-modern__row textarea {
padding-top: .9rem;
min-height: 120px;
font-size: .95rem;
line-height: 1.5;
resize: vertical;
}
.field-modern__row select:focus,
.field-modern__row textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.field-modern__hint {
display: block;
margin-top: .35rem;
color: var(--color-text-dim);
font-size: .8rem;
}
.field-modern__error {
display: block;
margin-top: .35rem;
color: var(--color-danger);
font-size: .82rem;
}
.picker-map {
width: 100%;
height: 360px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
background: var(--color-bg-input);
overflow: hidden;
margin-bottom: .8rem;
}
@media (max-width: 720px) {
.picker-map { height: 240px; }
}
@media (max-width: 480px) {
.picker-map { height: 200px; }
}
.picker-coords {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.picker-coords input {
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
padding: .7rem 1rem;
width: 100%;
font-family: var(--font-body);
font-size: .9rem;
}
.file-input {
display: block;
width: 100%;
padding: .8rem;
background: var(--color-bg-input);
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-family: var(--font-body);
cursor: pointer;
}
.file-input::file-selector-button {
background: var(--color-accent);
color: #1a1a1a;
border: none;
padding: .55rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
margin-right: 1rem;
cursor: pointer;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.form-row,
.picker-coords {
grid-template-columns: 1fr;
}
}
.map-fab {
position: fixed;
right: 1.25rem;
z-index: 500;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: var(--radius);
text-decoration: none;
cursor: pointer;
font-size: 1.05rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.map-fab--primary {
bottom: 1.25rem;
background: var(--color-accent);
color: #1a1a1a;
box-shadow: var(--shadow-accent);
}
.map-fab--primary:hover {
background: var(--color-accent-hover);
color: #1a1a1a;
transform: translateY(-2px);
}
.map-fab--secondary {
bottom: calc(1.25rem + 46px + 0.5rem);
background: rgba(20, 20, 20, 0.55);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-color: rgba(255, 255, 255, 0.08);
color: var(--color-text);
}
.map-fab--secondary:hover {
background: rgba(20, 20, 20, 0.75);
border-color: rgba(145, 70, 255, 0.4);
color: var(--color-accent);
}
.map-fab--secondary.is-active {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.35);
}
.map-fab--secondary.is-loading {
opacity: 0.7;
pointer-events: none;
}
.map-fab--secondary.is-loading i {
animation: locate-spin 0.9s linear infinite;
}
@keyframes locate-spin { to { transform: rotate(360deg); } }
.urbex-marker__pin {
--pin-color: var(--color-accent);
background: var(--pin-color);
}
.map-popup { min-width: 220px; }
.map-popup__cover {
width: 100%;
height: 130px;
background-size: cover;
background-position: center;
background-color: var(--color-bg-input);
border-radius: var(--radius-sm);
margin-bottom: .6rem;
}
.map-popup__title {
display: block;
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: 0.02em;
margin-bottom: .35rem;
}
.map-popup__loc,
.map-popup__cat,
.map-popup__risk {
display: block;
color: var(--color-text-muted);
font-size: .82rem;
margin-bottom: .15rem;
}
.map-popup__risk strong { color: var(--color-text); }
.map-popup__rating {
margin: .3rem 0 .15rem;
}
.map-popup__rating .stars--sm { font-size: .82rem; }
/* Beschreibungs-Auszug im Karten-Popup
Max 2 Zeilen über line-clamp, leichter Abstand nach oben damit
es sich von den Meta-Zeilen abhebt. */
.map-popup__excerpt {
margin: .6rem 0 0;
color: var(--color-text);
font-size: .85rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.urbexer-coming { padding: 3rem 1.5rem 4rem; }
.urbexer-coming__inner { max-width: 880px; margin: 0 auto; }
.urbexer-coming__card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2.5rem 2rem;
text-align: center;
}
.urbexer-coming__icon {
width: 72px; height: 72px;
margin: 0 auto 1.2rem;
display: flex; align-items: center; justify-content: center;
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
border-radius: 50%;
font-size: 1.8rem;
}
.urbexer-coming__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1rem;
margin: 1.6rem 0;
text-align: left;
}
.urbexer-coming__features > div {
display: flex; align-items: center; gap: .75rem;
padding: .9rem 1rem;
background: var(--color-bg-elevated);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.urbexer-coming__features i {
color: var(--color-accent);
font-size: 1.2rem;
width: 24px;
}
.urbexer-coming__note {
color: var(--color-text-muted);
font-size: .9rem;
margin-top: 1rem;
}
.page-admin {
background: var(--color-bg);
}
.admin-shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
@media (max-width: 900px) {
.admin-shell { grid-template-columns: 1fr; }
}
.admin-sidebar {
background: var(--color-bg-elevated);
border-right: 1px solid var(--color-border);
padding: 1.4rem 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
position: sticky;
top: 0;
height: 100vh;
}
@media (max-width: 900px) {
.admin-sidebar { position: static; height: auto; }
}
.admin-sidebar__brand {
text-decoration: none;
color: var(--color-text);
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
display: flex;
align-items: center;
gap: .5rem;
}
.admin-sidebar__brand .brand__pin {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.admin-sidebar__brand strong { color: var(--color-text); font-weight: 800; }
.admin-sidebar__brand span { color: var(--color-accent); }
.admin-sidebar__brand em {
margin-left: .6rem;
font-family: var(--font-body);
font-size: .7rem;
font-style: normal;
font-weight: 600;
color: var(--color-text-dim);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.admin-sidebar__nav { flex: 1; }
.admin-sidebar__nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .25rem;
}
.admin-sidebar__link {
display: flex;
align-items: center;
gap: .8rem;
padding: .7rem .9rem;
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: .92rem;
font-weight: 500;
transition: background .12s ease, color .12s ease;
}
.admin-sidebar__link:hover {
background: var(--color-bg-input);
color: var(--color-text);
}
.admin-sidebar__link.is-active {
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
}
.admin-sidebar__link i { width: 18px; text-align: center; }
.admin-sidebar__link .admin-badge {
margin-left: auto;
font-style: normal;
background: var(--color-danger);
color: #fff;
padding: .12rem .5rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
}
.admin-sidebar__foot {
border-top: 1px solid var(--color-border);
padding-top: 1rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.admin-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 2rem;
border-bottom: 1px solid var(--color-border);
background: rgba(31,31,31,0.6);
backdrop-filter: blur(8px);
}
.admin-topbar__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.02em;
}
.admin-topbar__user {
display: flex;
align-items: center;
gap: .6rem;
color: var(--color-text-muted);
font-size: .9rem;
}
.admin-topbar__user i { color: var(--color-accent); }
.admin-body {
padding: 1.8rem 2rem 3rem;
}
@media (max-width: 640px) {
.admin-topbar, .admin-body { padding-left: 1rem; padding-right: 1rem; }
}
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
}
.admin-stat {
display: flex;
gap: 1rem;
align-items: center;
padding: 1.2rem 1.4rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-decoration: none;
transition: transform .12s ease, border-color .12s ease;
}
.admin-stat:hover {
transform: translateY(-2px);
border-color: var(--color-border-light);
}
.admin-stat--accent { border-color: rgba(145, 70, 255,0.3); }
.admin-stat--danger { border-color: rgba(229,75,75,0.3); }
.admin-stat__icon {
width: 48px; height: 48px;
background: rgba(145, 70, 255,0.12);
color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
font-size: 1.2rem;
flex-shrink: 0;
}
.admin-stat--danger .admin-stat__icon {
background: rgba(229,75,75,0.12);
color: var(--color-danger);
}
.admin-stat__body strong {
display: block;
font-size: 1.6rem;
font-family: var(--font-display);
color: var(--color-text);
line-height: 1;
margin-bottom: .2rem;
}
.admin-stat__body span {
display: block;
color: var(--color-text);
font-size: .9rem;
font-weight: 600;
}
.admin-stat__body small {
display: block;
color: var(--color-text-dim);
font-size: .78rem;
margin-top: .15rem;
}
.admin-section { margin-bottom: 2.5rem; }
.admin-section > h2 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.admin-quicklinks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.admin-quicklink {
display: block;
padding: 1.2rem 1.3rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-decoration: none;
transition: border-color .12s ease, transform .12s ease;
}
.admin-quicklink:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
}
.admin-quicklink i {
color: var(--color-accent);
font-size: 1.3rem;
margin-bottom: .6rem;
}
.admin-quicklink strong {
display: block;
color: var(--color-text);
margin-bottom: .25rem;
}
.admin-quicklink span {
color: var(--color-text-muted);
font-size: .85rem;
}
.admin-tabs {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-bottom: 1.6rem;
border-bottom: 1px solid var(--color-border);
}
.admin-tab {
padding: .7rem 1.1rem;
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: .9rem;
font-weight: 600;
transition: background .12s ease, color .12s ease;
margin-bottom: -1px;
}
.admin-tab em {
font-style: normal;
margin-left: .4rem;
color: var(--color-text-dim);
font-weight: 500;
font-size: .8rem;
}
.admin-tab:hover { color: var(--color-text); }
.admin-tab.is-active {
color: var(--color-accent);
border-bottom: 2px solid var(--color-accent);
background: rgba(145, 70, 255,0.05);
}
.admin-table {
width: 100%;
border-collapse: collapse;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.admin-table th,
.admin-table td {
padding: .8rem 1rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.admin-table thead th {
background: var(--color-bg-elevated);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
font-weight: 600;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr.is-banned { opacity: 0.55; }
.admin-table small {
display: block;
color: var(--color-text-dim);
font-size: .78rem;
margin-top: .15rem;
}
.admin-table code {
background: var(--color-bg-input);
padding: .15rem .45rem;
border-radius: 4px;
font-size: .82rem;
color: var(--color-accent);
}
.admin-table__actions { white-space: nowrap; text-align: right; }
.admin-pill {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .2rem .55rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--color-bg-input);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
margin-right: .3rem;
}
.admin-pill--admin { background: rgba(145, 70, 255,0.15); color: var(--color-accent); border-color: rgba(145, 70, 255,0.3); }
.admin-pill--banned { background: rgba(229,75,75,0.15); color: var(--color-danger); border-color: rgba(229,75,75,0.3); }
.admin-pill--warn { background: rgba(145, 70, 255,0.10); color: #d4a017; }
.admin-pill--trial { background: rgba(145, 70, 255,0.15); color: var(--color-accent); }
.admin-pill--active { background: rgba(78,192,122,0.15); color: var(--color-success); border-color: rgba(78,192,122,0.3); }
.admin-pill--expired,
.admin-pill--cancelled,
.admin-pill--rejected,
.admin-pill--removed { background: rgba(229,75,75,0.10); color: #c97070; }
.admin-pill--open { background: rgba(229,75,75,0.15); color: var(--color-danger); }
.admin-pill--in_review{ background: rgba(145, 70, 255,0.15); color: var(--color-accent); }
.admin-pill--resolved { background: rgba(78,192,122,0.15); color: var(--color-success); }
.admin-places {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1.2rem;
}
.admin-place-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.admin-place-card--pending { border-left: 4px solid var(--color-accent); }
.admin-place-card--approved { border-left: 4px solid var(--color-success); }
.admin-place-card--rejected,
.admin-place-card--removed { border-left: 4px solid var(--color-danger); opacity: .85; }
.admin-place-card__cover {
height: 160px;
background: var(--color-bg-input);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-dim);
font-size: 2rem;
position: relative;
}
.admin-place-card__status {
position: absolute;
top: .7rem; right: .7rem;
padding: .2rem .6rem;
border-radius: 999px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
}
.admin-place-card__status--pending { background: var(--color-accent); color: #1a1a1a; }
.admin-place-card__status--approved { background: var(--color-success); color: #1a1a1a; }
.admin-place-card__status--rejected,
.admin-place-card__status--removed { background: var(--color-danger); }
.admin-place-card__body {
padding: 1rem 1.1rem;
flex: 1;
}
.admin-place-card__body h3 {
margin: 0 0 .3rem;
font-size: 1.15rem;
}
.admin-place-card__meta {
color: var(--color-text-muted);
font-size: .82rem;
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-bottom: .8rem;
}
.admin-place-card__desc {
color: var(--color-text-muted);
font-size: .88rem;
line-height: 1.4;
margin: 0 0 .8rem;
}
.admin-place-card__dl {
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: .25rem .8rem;
font-size: .82rem;
}
.admin-place-card__dl dt {
color: var(--color-text-dim);
font-weight: 600;
}
.admin-place-card__dl dd { margin: 0; color: var(--color-text); }
.admin-place-card__dl dd small {
display: block;
color: var(--color-text-dim);
}
.admin-place-card__actions {
padding: .8rem 1.1rem;
border-top: 1px solid var(--color-border);
background: var(--color-bg-elevated);
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.admin-place-card__actions .inline-form {
display: flex; gap: .5rem; flex-wrap: wrap;
}
.admin-remove-form { width: auto; }
.admin-remove-form[open] { width: 100%; }
.admin-remove-form summary {
list-style: none;
cursor: pointer;
}
.admin-remove-form summary::-webkit-details-marker { display: none; }
.admin-remove-form__inner {
margin-top: .7rem;
padding: .8rem;
background: var(--color-bg-input);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: .5rem;
}
.admin-remove-form__inner input[type="text"],
.admin-remove-form__inner input[type="number"] {
padding: .55rem .7rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
}
.admin-remove-form__check {
display: flex;
align-items: center;
gap: .5rem;
color: var(--color-text-muted);
font-size: .85rem;
}
.admin-reports {
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-report {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.2rem 1.4rem;
}
.admin-report--open { border-left: 4px solid var(--color-danger); }
.admin-report__head {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .8rem;
}
.admin-report__head time {
margin-left: auto;
color: var(--color-text-dim);
font-size: .82rem;
}
.admin-report__body h3 {
font-size: 1.1rem;
margin-bottom: .5rem;
}
.admin-report__msg {
color: var(--color-text);
font-size: .92rem;
margin: 0 0 .8rem;
padding: .8rem 1rem;
background: var(--color-bg-input);
border-radius: var(--radius-sm);
}
.admin-report__dl {
margin: 0 0 .8rem;
display: grid;
grid-template-columns: max-content 1fr;
gap: .25rem .8rem;
font-size: .85rem;
}
.admin-report__dl dt { color: var(--color-text-dim); }
.admin-report__dl dd { margin: 0; color: var(--color-text); }
.admin-report__actions {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding-top: .8rem;
border-top: 1px solid var(--color-border);
}
.admin-report__actions input[type="text"] {
flex: 1;
min-width: 200px;
padding: .55rem .8rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: .88rem;
}
.admin-search {
display: flex;
gap: .5rem;
margin-bottom: 1.2rem;
align-items: center;
}
.admin-search input {
flex: 1;
max-width: 360px;
padding: .55rem .8rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
}
.admin-search__reset {
color: var(--color-text-dim);
text-decoration: none;
font-size: 1.4rem;
padding: 0 .5rem;
}
.admin-actions-menu {
position: relative;
display: inline-block;
}
.admin-actions-menu summary {
list-style: none;
cursor: pointer;
}
.admin-actions-menu summary::-webkit-details-marker { display: none; }
.admin-actions-menu__panel {
position: absolute;
right: 0;
top: 100%;
margin-top: .3rem;
min-width: 220px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
z-index: 10;
padding: .4rem;
}
.admin-actions-menu__panel form { display: flex; flex-direction: column; }
.admin-actions-menu__panel button {
background: transparent;
border: none;
color: var(--color-text);
padding: .55rem .7rem;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: .88rem;
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
}
.admin-actions-menu__panel button:hover {
background: var(--color-bg-input);
color: var(--color-accent);
}
.admin-actions-menu__sub {
border-top: 1px solid var(--color-border);
margin-top: .3rem;
padding-top: .5rem;
gap: .4rem;
flex-direction: row !important;
align-items: center;
flex-wrap: wrap;
padding: .55rem .7rem;
}
.admin-actions-menu__sub label {
font-size: .8rem;
color: var(--color-text-muted);
}
.admin-actions-menu__sub input[type="number"] {
width: 60px;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
padding: .3rem .4rem;
font-family: var(--font-body);
}
.admin-actions-menu__sub button {
flex: 1;
background: var(--color-bg-input);
justify-content: center;
}
.admin-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
background: var(--color-bg-card);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
}
.admin-empty i {
font-size: 2rem;
color: var(--color-text-dim);
display: block;
margin-bottom: .8rem;
}
.admin-muted { color: var(--color-text-muted); margin-bottom: 1rem; font-size: .9rem; }
/* =====================================================================
Satelliten-Cover-Generator (admincp/generate-covers.php)
===================================================================== */
.cover-gen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.cover-gen__card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.5rem;
}
.cover-gen__card h2 {
margin: 0 0 1rem;
font-size: 1.3rem;
color: var(--color-text);
}
.cover-gen__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(145, 70, 255, 0.12);
color: #9146FF;
border-radius: 12px;
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.cover-gen__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1.2rem;
}
.cover-gen__stat {
text-align: center;
padding: 0.7rem 0.3rem;
background: rgba(255,255,255,0.03);
border-radius: 8px;
}
.cover-gen__stat strong {
display: block;
font-size: 1.5rem;
color: var(--color-text);
font-weight: 700;
line-height: 1.2;
}
.cover-gen__stat span {
display: block;
font-size: 0.72rem;
color: var(--color-text-muted);
margin-top: 0.2rem;
line-height: 1.3;
}
.cover-gen__start { width: 100%; }
.cover-gen__done {
text-align: center;
color: #4ec07a;
padding: 0.8rem;
background: rgba(78, 192, 122, 0.08);
border-radius: 8px;
margin: 0;
}
.cover-gen__done i { margin-right: 0.4rem; }
.cover-gen__progress { margin-top: 1.2rem; }
.cover-gen__bar {
height: 10px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
margin-bottom: 0.6rem;
}
.cover-gen__bar-fill {
height: 100%;
background: linear-gradient(90deg, #4ec07a, #9146FF);
transition: width 0.3s ease;
}
.cover-gen__status {
margin: 0.4rem 0;
color: var(--color-text);
font-size: 0.88rem;
font-weight: 500;
}
.cover-gen__log {
list-style: none;
padding: 0;
margin: 0.8rem 0 0;
max-height: 220px;
overflow-y: auto;
border-top: 1px solid var(--color-border);
padding-top: 0.8rem;
}
.cover-gen__log li {
font-size: 0.82rem;
color: var(--color-text-muted);
padding: 0.25rem 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cover-gen__log li:last-child { border-bottom: none; }
.cover-gen__log i { color: #4ec07a; margin-right: 0.4rem; }
.cover-gen__note {
background: rgba(255,255,255,0.03);
border-left: 3px solid var(--color-accent);
padding: 0.9rem 1.1rem;
border-radius: 0 8px 8px 0;
color: var(--color-text-muted);
font-size: 0.88rem;
line-height: 1.5;
}
@media (max-width: 600px) {
.cover-gen__stats { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.cover-gen__stat strong { font-size: 1.2rem; }
}
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
color: var(--color-text-muted);
font-size: .9rem;
}
.admin-pagination a {
color: var(--color-accent);
text-decoration: none;
padding: .4rem .8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.admin-pagination a:hover {
border-color: var(--color-accent);
}
.field-modern__row input,
.field-modern__row select,
.field-modern__row textarea {
width: 100%;
height: auto;
box-sizing: border-box;
padding: .9rem 1rem .9rem 2.7rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.field-modern__row select {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8a8a8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}
.field-modern__row textarea {
min-height: 130px;
padding-top: 1rem;
line-height: 1.55;
resize: vertical;
}
.field-modern__row--textarea .field-modern__icon {
top: 1rem;
transform: none;
}
.field-modern__row input:focus,
.field-modern__row select:focus,
.field-modern__row textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.upload-dropzone {
position: relative;
}
.upload-dropzone__input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.upload-dropzone__label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
padding: 1.8rem 1rem;
background: var(--color-bg-input);
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
text-align: center;
}
.upload-dropzone__label i {
font-size: 1.8rem;
color: var(--color-accent);
}
.upload-dropzone__label strong {
color: var(--color-text);
font-size: 1rem;
}
.upload-dropzone__label span {
font-size: .82rem;
}
.upload-dropzone:hover .upload-dropzone__label {
border-color: var(--color-accent);
background: rgba(145, 70, 255, 0.04);
}
.preview-grid {
margin-top: .8rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .6rem;
}
.preview-grid[hidden] { display: none; }
.preview-item {
aspect-ratio: 1;
background-size: cover;
background-position: center;
background-color: var(--color-bg-input);
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
position: relative;
}
.preview-item--cover {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent);
}
.preview-item__badge {
position: absolute;
top: .35rem; left: .35rem;
padding: .15rem .5rem;
background: var(--color-accent);
color: #1a1a1a;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
}
.risk-slider {
height: 52px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: .75rem;
padding: 0 1rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.risk-slider input[type="range"] {
flex: 1;
min-width: 0;
-webkit-appearance: none;
appearance: none;
background: transparent;
margin: 0;
}
.risk-slider input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #4ec07a 0%, #e5a624 50%, #e54b4b 100%);
}
.risk-slider input[type="range"]::-moz-range-track {
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #4ec07a 0%, #e5a624 50%, #e54b4b 100%);
border: none;
}
.risk-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
background: var(--color-text);
border: 2px solid var(--color-accent);
border-radius: 50%;
margin-top: -6px;
cursor: pointer;
}
.risk-slider input[type="range"]::-moz-range-thumb {
width: 12px; height: 12px;
background: var(--color-text);
border: 2px solid var(--color-accent);
border-radius: 50%;
cursor: pointer;
}
.risk-slider__value {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
min-width: 2.5em;
text-align: right;
}
.risk-slider__value strong {
color: var(--color-text);
font-weight: 400;
}
.risk-slider__label {
--risk-color: var(--color-accent);
padding: .15rem .55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--risk-color) 15%, transparent);
color: var(--risk-color);
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
width: 105px;
text-align: center;
box-sizing: border-box;
}
/* Mobile: Slider darf nicht aus dem Container brechen */
@media (max-width: 480px) {
.risk-slider {
height: auto;
flex-wrap: wrap;
padding: .75rem 1rem;
gap: .5rem;
}
.risk-slider input[type="range"] {
flex: 1 0 100%;
order: 1;
}
.risk-slider__value { order: 2; }
.risk-slider__label {
order: 3;
margin-left: auto;
}
}
/* Grid-Kinder dürfen niemals breiter werden als ihre Zelle */
.form-row > .field-modern,
.picker-coords > .field-modern {
min-width: 0;
}
.admin-table { overflow: visible; }
.admin-actions-row {
display: inline-flex;
align-items: center;
gap: .35rem;
flex-wrap: nowrap;
}
.admin-icon-btn {
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
font-family: var(--font-body);
font-size: .9rem;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.admin-icon-btn:hover {
background: var(--color-bg-elevated);
color: var(--color-text);
border-color: var(--color-border-light);
}
.admin-icon-btn--danger:hover { color: var(--color-danger); border-color: var(--color-danger); }
.admin-icon-btn--accent:hover { color: var(--color-accent); border-color: var(--color-accent); }
.admin-icon-btn--success:hover { color: var(--color-success); border-color: var(--color-success); }
.admin-icon-btn.is-active {
background: rgba(145, 70, 255,0.12);
color: var(--color-accent);
border-color: var(--color-accent);
}
.admin-trial-form {
display: inline-flex;
align-items: center;
gap: .3rem;
margin-left: .3rem;
padding-left: .55rem;
border-left: 1px solid var(--color-border);
}
.admin-trial-form input[type="number"] {
width: 52px;
padding: .3rem .4rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: .82rem;
text-align: center;
}
.admin-trial-form span {
color: var(--color-text-dim);
font-size: .78rem;
}
.field-modern__row input,
.field-modern__row select {
height: 52px;
}
.field-modern__row textarea {
min-height: 140px;
}
.custom-select {
}
.custom-select.is-open {
z-index: 10000;
}
.custom-select__display {
cursor: pointer !important;
user-select: none;
caret-color: transparent;
}
.custom-select.is-open .custom-select__display {
border-color: var(--color-accent) !important;
}
.custom-select__chevron {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-dim);
font-size: .8rem;
z-index: 2;
cursor: pointer;
transition: transform .15s ease, color .15s ease;
pointer-events: auto;
}
.custom-select.is-open .custom-select__chevron {
transform: translateY(-50%) rotate(180deg);
color: var(--color-accent);
}
.custom-select.is-open .custom-select__icon,
.custom-select:has(.custom-select__display:not([value=""])) .custom-select__icon {
color: var(--color-accent);
}
.custom-select__panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 10000;
background: var(--color-bg-card);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
list-style: none;
margin: 0;
padding: .35rem;
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border-light) transparent;
}
.custom-select__panel::-webkit-scrollbar { width: 8px; }
.custom-select__panel::-webkit-scrollbar-track { background: transparent; }
.custom-select__panel::-webkit-scrollbar-thumb {
background: var(--color-border-light);
border-radius: 4px;
border: 2px solid var(--color-bg-card);
}
.custom-select__panel::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
.custom-select__option {
display: flex;
align-items: center;
gap: .75rem;
padding: .65rem .8rem;
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-sm);
font-size: .95rem;
transition: background .1s ease, color .1s ease;
}
.custom-select__option i {
color: var(--color-text);
font-size: 1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
transition: color .1s ease;
}
.custom-select__option:hover { background: var(--color-bg-input); color: var(--color-accent); }
.custom-select__option:hover i { color: var(--color-accent); }
.custom-select__option.is-selected { background: rgba(145, 70, 255, 0.12); color: var(--color-accent); }
.custom-select__option.is-selected i { color: var(--color-accent); }
.submit-form .field-modern__row input,
.submit-form .field-modern__row select {
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
margin: 0 !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-sm) !important;
font-family: var(--font-body) !important;
font-size: 1rem !important;
line-height: 1.4 !important;
vertical-align: middle !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 2.7rem !important;
padding-right: 1rem !important;
}
.submit-form .field-modern__row select {
padding-right: 2.5rem !important;
}
.submit-form .custom-select .custom-select__display {
padding-right: 2.5rem !important;
}
.submit-form .field-modern__row input:focus,
.submit-form .field-modern__row select:focus {
border-color: var(--color-accent) !important;
}
.admin-place-card__imgcount {
position: absolute;
top: .7rem;
left: .7rem;
padding: .2rem .55rem;
border-radius: 999px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.admin-place-card__cover-link {
position: absolute;
inset: 0;
z-index: 1;
cursor: zoom-in;
}
.admin-place-card__thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
gap: .35rem;
padding: .55rem .55rem 0;
background: var(--color-bg-card);
}
.admin-place-card__thumb {
display: block;
aspect-ratio: 1;
background-size: cover;
background-position: center;
background-color: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: zoom-in;
transition: border-color .12s ease, transform .12s ease;
}
.admin-place-card__thumb:hover {
border-color: var(--color-accent);
transform: scale(1.05);
z-index: 2;
}
.admin-place-card__thumb.is-cover {
border-color: var(--color-accent);
}
.lightbox[hidden] { display: none !important; }
.lightbox {
position: fixed;
inset: 0;
z-index: 20000;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
animation: lb-fade-in .15s ease;
overflow: hidden; /* damit der überskalierte BG-Layer nicht raussticht */
}
@keyframes lb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Verschwommener Hintergrund: dasselbe Bild stark vergrößert + geblurrt + abgedunkelt.
Liegt hinter allem anderen (z-index 0), das scharfe Bild hat per default höheres Stacking. */
.lightbox__bg {
position: absolute;
inset: -40px; /* etwas größer als der Container, damit die Blur-Kanten außerhalb des Sichtbaren liegen */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: blur(22px) brightness(0.7) saturate(115%);
-webkit-filter: blur(22px) brightness(0.7) saturate(115%);
transform: scale(1.1); /* zusätzlich gezoomt damit die Blur-Ränder nicht ins Bild reichen */
z-index: 0;
pointer-events: none;
}
.lightbox__img {
position: relative;
z-index: 2;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius-sm);
}
.lightbox__close,
.lightbox__nav {
position: absolute;
z-index: 3;
background: rgba(31,31,31,0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
font-family: var(--font-body);
}
.lightbox__close {
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.6rem;
line-height: 1;
}
.lightbox__close:hover {
background: var(--color-danger);
transform: rotate(90deg);
}
.lightbox__nav {
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }
.lightbox__nav:hover {
background: var(--color-accent);
color: #1a1a1a;
}
.lightbox__counter {
position: absolute;
z-index: 3;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
padding: .35rem .9rem;
background: rgba(31,31,31,0.85);
backdrop-filter: blur(8px);
color: #fff;
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
}
.place-detail {
padding-bottom: 4rem;
}
.place-detail__head {
max-width: var(--container);
margin: 0 auto;
padding: 2rem 1.5rem 1.5rem;
}
.place-detail__back {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: .9rem;
margin-bottom: 1.2rem;
transition: color .15s ease;
}
.place-detail__back:hover { color: var(--color-accent); }
.place-detail__head-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem;
margin-bottom: .7rem;
}
.place-detail__id {
display: inline-flex;
align-items: center;
padding: .25rem .65rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border-radius: 999px;
font-family: var(--font-display);
font-size: .82rem;
letter-spacing: 0.06em;
}
.place-detail__cat {
--cat-color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .25rem .7rem;
background: color-mix(in srgb, var(--cat-color) 15%, transparent);
color: var(--cat-color);
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
border: 1px solid color-mix(in srgb, var(--cat-color) 35%, transparent);
}
.place-detail__title {
margin: 0 0 .3rem;
font-family: var(--font-body);
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(1.7rem, 4vw, 2.5rem);
line-height: 1.15;
color: #fff;
}
.place-detail__loc {
color: var(--color-text-muted);
margin: 0;
font-size: .95rem;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.place-detail__loc i { color: var(--color-accent); }
.place-detail__map-hero {
max-width: var(--container);
margin: 0 auto 2rem;
padding: 0 1.5rem;
}
.place-detail__map-full {
height: 360px;
width: 100%;
border-radius: var(--radius);
border: 1px solid var(--color-border);
background: var(--color-bg-input);
overflow: hidden;
}
@media (max-width: 640px) {
.place-detail__map-full { height: 220px; }
}
@media (max-width: 420px) {
.place-detail__map-full { height: 190px; }
}
.place-detail__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
}
.place-detail__actions {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-bottom: 2rem;
}
.place-detail__main { min-width: 0; }
.place-detail__h2 {
font-size: 1.15rem;
margin: 0 0 1rem;
display: flex;
align-items: center;
gap: .55rem;
color: var(--color-text);
letter-spacing: -0.01em;
}
.place-detail__h2 i { color: var(--color-accent); font-size: .95em; }
.place-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: .5rem;
margin-bottom: 2.5rem;
}
.place-gallery__item {
display: block;
aspect-ratio: 1;
background-size: cover;
background-position: center;
background-color: var(--color-bg-input);
border-radius: var(--radius-sm);
cursor: zoom-in;
transition: transform .12s ease, opacity .12s ease;
opacity: .92;
}
.place-gallery__item:hover {
transform: scale(1.03);
opacity: 1;
}
.place-detail__desc { margin-bottom: 2.5rem; }
.place-detail__text {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.5rem;
line-height: 1.65;
color: var(--color-text);
}
.place-detail__comments { margin-top: 1rem; }
.place-detail__empty {
color: var(--color-text-muted);
text-align: center;
padding: 2rem;
background: var(--color-bg-card);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
}
.comment-form {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 1.5rem;
}
.comment-form textarea {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: .95rem;
padding: .8rem 1rem;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
}
.comment-form textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.comment-form__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .7rem;
color: var(--color-text-dim);
font-size: .8rem;
}
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.comment {
display: grid;
grid-template-columns: 40px 1fr;
gap: .9rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.2rem;
}
.comment__avatar { flex-shrink: 0; }
.comment__main { min-width: 0; }
.comment__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .4rem;
}
.comment__head strong { color: var(--color-accent); font-weight: 600; font-size: .92rem; }
.comment__head time { color: var(--color-text-dim); font-size: .8rem; }
.comment__body { margin: 0; color: var(--color-text); font-size: .92rem; line-height: 1.5; }
.place-detail__grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2.5rem;
}
@media (max-width: 900px) {
.place-detail__grid { grid-template-columns: 1fr; gap: 2rem; }
}
.place-detail__main { min-width: 0; }
.place-meta {
position: sticky;
top: calc(var(--topbar-h) + 1rem);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: .5rem 1.2rem;
display: flex;
flex-direction: column;
}
.place-meta__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .85rem 0;
border-bottom: 1px solid var(--color-border);
font-size: .9rem;
}
.place-meta__row:last-child {
border-bottom: 0;
}
.place-meta__row--block {
flex-direction: column;
align-items: flex-start;
gap: .45rem;
}
.place-meta__label {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
font-weight: 600;
}
.place-meta__value {
color: var(--color-text);
font-weight: 500;
text-align: right;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.place-meta__row--block .place-meta__value,
.place-meta__bar {
width: 100%;
text-align: left;
}
.place-meta__coords {
display: inline-flex;
align-items: center;
gap: .55rem;
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
padding: .55rem .7rem;
border-radius: var(--radius-sm);
font-family: ui-monospace, 'Courier New', monospace;
font-size: .82rem;
color: var(--color-accent);
word-break: break-all;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
text-align: left;
}
.place-meta__coords i { flex-shrink: 0; color: var(--color-text-muted); }
.place-meta__coords:hover {
border-color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-input));
}
.place-meta__coords:hover i { color: var(--color-accent); }
.place-meta__coords.is-success {
border-color: #22c55e;
color: #22c55e;
}
.place-meta__coords.is-success i { color: #22c55e; }
.map-popup__btn {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
margin: .8rem 0 0;
padding: .5rem .8rem;
background: var(--color-accent);
color: #1a1a1a !important;
border-radius: var(--radius-sm);
font-size: .85rem;
font-weight: 700;
text-decoration: none;
transition: background .15s ease;
}
.map-popup__btn:hover {
background: var(--color-accent-hover);
color: #1a1a1a !important;
}
.admin-place-card__id {
display: inline-block;
padding: .1rem .45rem;
margin-right: .4rem;
background: var(--color-bg-input);
color: var(--color-text-dim);
border-radius: 4px;
font-family: var(--font-display);
font-size: .78rem;
letter-spacing: 0.05em;
vertical-align: middle;
}
.diff-bar {
position: relative;
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, #4ec07a 0%, #e5a624 50%, #e54b4b 100%);
margin: .3rem 0 .35rem;
overflow: visible;
}
.diff-bar__marker {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background: var(--color-bg-card);
border: 2px solid var(--color-text);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
z-index: 1;
}
.diff-bar__label {
font-size: .8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent);
}
.diff-bar__label span {
color: var(--color-text-dim);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
margin-left: .3rem;
}
.map-popup .diff-bar {
margin-top: .5rem;
}
.map-popup .diff-bar__label {
font-size: .72rem;
}
/* =====================================================================
STERNE-BEWERTUNG (Lesemodus + interaktiv)
===================================================================== */
.stars {
display: inline-flex;
align-items: center;
gap: .15rem;
line-height: 1;
color: #9146FF;
font-size: .9rem;
white-space: nowrap;
}
.stars__star { font-size: 1em; }
.stars__star--empty { color: rgba(255, 255, 255, 0.15); }
.stars__value {
margin-left: .4rem;
color: var(--color-text);
font-weight: 600;
font-size: 0.9em;
}
.stars__count {
margin-left: .25rem;
color: var(--color-text-muted);
font-size: 0.85em;
font-weight: 400;
}
.stars--empty {
color: rgba(255, 255, 255, 0.25);
font-style: italic;
}
.stars--empty .stars__empty-label {
color: var(--color-text-dim);
font-size: 0.82em;
font-style: normal;
margin-left: .35rem;
}
.stars--sm { font-size: .8rem; }
.stars--md { font-size: .9rem; }
.stars--lg { font-size: 1.1rem; }
/* Interaktiver Sterne-Picker (place-detail / overnight-detail) */
.stars-picker {
display: inline-flex;
align-items: center;
gap: .2rem;
}
.stars-picker__star {
cursor: pointer;
color: rgba(255, 255, 255, 0.18);
font-size: 1.5rem;
transition: color .12s ease, transform .1s ease;
background: none;
border: none;
padding: .1rem .15rem;
line-height: 1;
}
.stars-picker__star:hover {
transform: scale(1.1);
}
.stars-picker__star.is-active,
.stars-picker__star.is-hover {
color: #9146FF;
}
.stars-picker.is-loading { opacity: .5; pointer-events: none; }
.stars-picker__hint {
margin-left: .75rem;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.stars-picker__clear {
background: none;
border: none;
color: var(--color-text-dim);
font-size: 0.8rem;
cursor: pointer;
margin-left: .5rem;
text-decoration: underline;
}
.stars-picker__clear:hover { color: var(--color-danger); }
/* Box um den Picker (Place-/Overnight-Detail) */
.rating-box {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.rating-box__summary {
display: flex;
flex-direction: column;
gap: .25rem;
}
.rating-box__summary strong {
font-size: 1.1rem;
color: var(--color-text);
}
.rating-box__summary small {
color: var(--color-text-muted);
font-size: .8rem;
}
.rating-box__login {
color: var(--color-text-muted);
font-size: .85rem;
}
.rating-box__login a {
color: var(--color-accent);
text-decoration: none;
}
.rating-box__login a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.rating-box { flex-direction: column; align-items: stretch; }
.stars-picker { justify-content: center; }
.stars-picker__star { font-size: 1.8rem; }
}
.comment__edited {
color: var(--color-text-dim);
font-style: italic;
font-size: .78rem;
margin-left: .3rem;
}
.comment__actions {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .6rem;
}
.comment__action {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .25rem .55rem;
background: transparent;
border: none;
color: var(--color-text-dim);
font-size: .78rem;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
font-family: var(--font-body);
transition: color .12s ease, background .12s ease;
}
.comment__action:hover {
color: var(--color-accent);
background: var(--color-bg-input);
}
.comment__action--danger:hover {
color: var(--color-danger, #e54b4b);
}
.comment__edit-form textarea {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: .92rem;
padding: .6rem .8rem;
resize: vertical;
box-sizing: border-box;
}
.comment__edit-form textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.comment__edit-foot {
display: flex;
justify-content: flex-end;
gap: .5rem;
margin-top: .6rem;
}
.comment__report {
display: inline-block;
}
.comment__report summary {
list-style: none;
cursor: pointer;
}
.comment__report summary::-webkit-details-marker { display: none; }
.comment__report[open] summary { color: var(--color-accent); }
.comment__report-form {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .5rem;
padding: .6rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
align-items: center;
}
.comment__report-form select,
.comment__report-form input[type="text"] {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--color-text);
font-family: var(--font-body);
font-size: .82rem;
padding: .35rem .55rem;
border-radius: 4px;
height: 32px;
}
.comment__report-form select { min-width: 130px; }
.comment__report-form input[type="text"] { flex: 1; min-width: 150px; }
.comment__report-form .btn { height: 32px; padding: 0 .8rem; }
.admin-comments {
display: flex;
flex-direction: column;
gap: .8rem;
}
.admin-comment {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.2rem;
transition: opacity .15s ease;
}
.admin-comment.is-hidden {
opacity: .55;
}
.admin-comment.is-reported {
border-left-color: var(--color-danger, #e54b4b);
}
.admin-comment__head {
display: flex;
align-items: center;
gap: .55rem;
margin-bottom: .4rem;
flex-wrap: wrap;
}
.admin-comment__id {
display: inline-block;
padding: .1rem .45rem;
background: var(--color-bg-input);
color: var(--color-text-dim);
border-radius: 4px;
font-family: var(--font-display);
font-size: .78rem;
letter-spacing: 0.05em;
}
.admin-comment__head strong {
color: var(--color-accent);
font-weight: 600;
font-size: .92rem;
}
.admin-comment__head time {
color: var(--color-text-dim);
font-size: .8rem;
margin-left: auto;
}
.admin-comment__body {
margin: 0 0 .8rem;
color: var(--color-text);
font-size: .92rem;
line-height: 1.55;
}
.admin-comment__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
padding-top: .6rem;
border-top: 1px solid var(--color-border);
}
.admin-comment__place {
color: var(--color-text-dim);
text-decoration: none;
font-size: .82rem;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.admin-comment__place:hover {
color: var(--color-accent);
}
.admin-comment__actions {
display: flex;
gap: .4rem;
}
.admin-report__quote {
background: var(--color-bg-input);
border-left: 3px solid var(--color-accent);
padding: .8rem 1rem;
margin: .6rem 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--color-text);
font-size: .92rem;
line-height: 1.5;
font-style: italic;
}
.leaflet-control-attribution {
font-size: 9px !important;
padding: 2px 6px !important;
background: rgba(20, 20, 20, 0.75) !important;
color: rgba(255, 255, 255, 0.45) !important;
backdrop-filter: blur(4px);
line-height: 1.4;
border-top-left-radius: 4px;
}
.leaflet-control-attribution a {
color: rgba(255, 255, 255, 0.7) !important;
text-decoration: none;
}
.leaflet-control-attribution a:hover {
color: var(--color-accent) !important;
}
.user-avatar--initial {
font-family: var(--font-body);
text-transform: uppercase;
user-select: none;
line-height: 1;
}
.place-report-panel[hidden] { display: none !important; }
.place-report-panel {
margin: -.8rem 0 2rem;
padding: 1.2rem 1.4rem;
background: var(--color-bg-card);
border: 1px solid color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
border-radius: var(--radius);
animation: report-slide .2s ease;
}
@keyframes report-slide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.place-report-panel__foot {
display: flex;
gap: .5rem;
justify-content: flex-end;
margin-top: .3rem;
}
.place-detail__report-form {
display: flex;
flex-direction: column;
gap: .9rem;
max-width: 100%;
}
.place-detail__report-form label {
display: flex;
flex-direction: column;
gap: .35rem;
font-size: .88rem;
color: var(--color-text-dim);
}
.place-detail__report-form label small {
font-size: .75rem;
color: var(--color-text-dim);
font-weight: 400;
}
.place-detail__report-form select,
.place-detail__report-form textarea {
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: .92rem;
padding: .65rem .9rem;
}
.place-detail__report-form textarea {
resize: vertical;
min-height: 70px;
}
.place-detail__report-form select:focus,
.place-detail__report-form textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.btn--danger {
border-color: color-mix(in srgb, var(--color-danger) 45%, transparent) !important;
color: var(--color-danger) !important;
}
.btn--danger:hover,
.btn--danger.is-active {
background: var(--color-danger) !important;
border-color: var(--color-danger) !important;
color: #fff !important;
}
.admin-pill--pending {
background: rgba(145, 70, 255, 0.15);
color: var(--color-accent);
border: 1px solid rgba(145, 70, 255, 0.4);
}
.admin-comment.is-pending {
border-left: 3px solid var(--color-accent);
}
.notif-dropdown {
position: relative;
}
.notif-dropdown__trigger {
background: transparent;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 1.1rem;
padding: 0;
transition: color .15s ease;
}
.notif-dropdown__trigger:hover {
color: var(--color-accent);
}
.notif-dropdown.is-open .notif-dropdown__trigger {
color: var(--color-accent);
}
.notif-dropdown__badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--color-danger);
color: #fff;
border-radius: 999px;
font-size: .65rem;
font-weight: 700;
line-height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.notif-dropdown__panel {
position: absolute;
top: calc(100% + 17px);
right: 0;
width: 380px;
max-height: 480px;
background: #1a1a1a;
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,0.5),
0 2px 6px rgba(0,0,0,0.3);
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 1100;
}
.notif-dropdown.is-open .notif-dropdown__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.notif-dropdown__head {
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.notif-dropdown__head strong { font-size: 1rem; color: var(--color-text); }
.notif-dropdown__mark-all {
background: none;
border: none;
color: var(--color-accent);
cursor: pointer;
font-size: .82rem;
font-weight: 600;
padding: 0;
}
.notif-dropdown__mark-all:hover { text-decoration: underline; }
.notif-dropdown__list {
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: var(--color-border-light) transparent;
}
.notif-dropdown__list::-webkit-scrollbar { width: 6px; }
.notif-dropdown__list::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 4px; }
.notif-dropdown__empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--color-text-dim);
}
.notif-dropdown__empty i { font-size: 1.8rem; margin-bottom: .5rem; display: block; opacity: 0.5; }
.notif-dropdown__empty p { margin: 0; font-size: .88rem; }
.notif-item {
display: grid;
grid-template-columns: 36px 1fr 10px;
gap: .8rem;
padding: .85rem 1.2rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
text-decoration: none;
color: var(--color-text);
transition: background .12s ease;
align-items: start;
}
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-item:last-child { border-bottom: none; }
.notif-item--unread { background: rgba(255,255,255,0.025); }
.notif-item--unread:hover { background: rgba(255,255,255,0.045); }
.notif-item__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: rgba(145, 70, 255,0.12);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: .95rem;
flex-shrink: 0;
}
.notif-item__body { min-width: 0; }
.notif-item__body strong {
display: block;
font-size: .9rem;
color: var(--color-text);
font-weight: 600;
margin-bottom: .15rem;
}
.notif-item__body p {
margin: 0 0 .25rem;
font-size: .82rem;
color: var(--color-text-muted);
line-height: 1.35;
}
.notif-item__body time {
font-size: .72rem;
color: var(--color-text-dim);
}
.notif-item__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
margin-top: 14px;
flex-shrink: 0;
}
.profile-avatar-edit {
display: flex;
gap: 1.5rem;
align-items: flex-start;
flex-wrap: wrap;
}
.profile-avatar-edit__preview {
flex-shrink: 0;
}
.profile-avatar-edit__preview .user-avatar {
border: 2px solid var(--color-border);
}
.profile-avatar-edit__forms {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .6rem;
flex: 1;
min-width: 0;
}
.profile-avatar-edit__forms .inline-form {
display: inline-block;
}
.profile-avatar-edit__forms > .inline-form:first-child,
.profile-avatar-edit__forms > .inline-form:nth-child(2) {
display: inline-flex;
align-items: center;
gap: .6rem;
}
.profile-avatar-edit__hint {
color: var(--color-text-dim);
font-size: .8rem;
margin-top: .3rem;
}
.modal[hidden] { display: none !important; }
.modal {
position: fixed;
inset: 0;
z-index: 30000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: modal-fade-in .15s ease;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
cursor: pointer;
}
.modal__dialog {
position: relative;
background: #1a1a1a;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
width: 100%;
max-width: 440px;
max-height: calc(100vh - 3rem);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modal-pop .18s ease;
}
@keyframes modal-pop {
from { opacity: 0; transform: scale(0.96) translateY(-8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal--lg .modal__dialog { max-width: 600px; }
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--color-border);
}
.modal__title {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--color-text);
}
.modal__close {
background: transparent;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
padding: 0;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
transition: background .15s ease, color .15s ease;
}
.modal__close:hover {
background: rgba(255,255,255,0.06);
color: var(--color-text);
}
.modal__body {
padding: 1.3rem 1.4rem;
overflow-y: auto;
color: var(--color-text);
line-height: 1.55;
}
.modal__message { margin: 0; font-size: .95rem; }
.modal__footer {
display: flex;
justify-content: flex-end;
gap: .6rem;
padding: 1rem 1.4rem;
border-top: 1px solid var(--color-border);
background: rgba(0,0,0,0.15);
}
.btn--danger-solid {
background: var(--color-danger) !important;
border-color: var(--color-danger) !important;
color: #fff !important;
}
.btn--danger-solid:hover {
background: #d63838 !important;
border-color: #d63838 !important;
}
.cropper-area {
width: 100%;
height: 320px;
background: #0a0a0a;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 1rem;
}
.cropper-area img {
display: block;
max-width: 100%;
}
.cropper-controls {
display: flex;
flex-direction: column;
gap: .6rem;
}
.cropper-controls label {
color: var(--color-text-dim);
font-size: .85rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.cropper-view-box,
.cropper-face {
border-radius: var(--radius-sm);
}
.cropper-line, .cropper-point { background-color: var(--color-accent) !important; }
.cropper-view-box {
outline: 2px solid var(--color-accent) !important;
outline-color: rgba(145, 70, 255, 0.85) !important;
}
.admin-report__actions--end {
justify-content: flex-end;
}
.usercp-places-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.usercp-place-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.usercp-place-card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.usercp-place-card__cover-link {
display: block;
text-decoration: none;
}
.usercp-place-card__cover {
position: relative;
aspect-ratio: 4 / 3;
background: #0f0f0f center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.15);
font-size: 2rem;
}
.usercp-place-card__id {
position: absolute;
top: .6rem;
left: .6rem;
background: #111;
color: var(--color-accent);
font-size: .75rem;
font-weight: 700;
padding: .25rem .55rem;
border-radius: var(--radius-sm);
letter-spacing: 0.02em;
border: 1px solid var(--color-border);
}
.usercp-place-card__status {
position: absolute;
top: .6rem;
right: .6rem;
font-size: .7rem;
font-weight: 700;
padding: .3rem .65rem;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.usercp-place-card__status--ok { background: #1f3a28; color: #6ed694; border: 1px solid #2d5a3c; }
.usercp-place-card__status--pending { background: #3a2c10; color: var(--color-accent); border: 1px solid #5a4318; }
.usercp-place-card__status--danger { background: #3a1d1d; color: #fca5a5; border: 1px solid #5a2a2a; }
.usercp-place-card__body {
padding: .85rem .95rem .95rem;
display: flex;
flex-direction: column;
gap: .5rem;
flex: 1;
}
.usercp-place-card__title {
margin: 0;
font-size: .98rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-text);
}
.usercp-place-card__title a {
color: inherit;
text-decoration: none;
}
.usercp-place-card__title a:hover { color: var(--color-accent); }
.usercp-place-card__loc {
margin: 0;
font-size: .82rem;
color: var(--color-text-dim);
display: flex;
align-items: center;
gap: .35rem;
}
.usercp-place-card__meta {
display: flex;
flex-wrap: wrap;
gap: .8rem;
font-size: .78rem;
color: var(--color-text-muted);
margin-top: .2rem;
}
.usercp-place-card__meta i { margin-right: .25rem; }
.usercp-place-card__reason {
margin: 0;
font-size: .8rem;
color: #fca5a5;
background: rgba(229, 75, 75, 0.08);
border-left: 2px solid rgba(229, 75, 75, 0.5);
padding: .4rem .6rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.usercp-place-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: .6rem;
border-top: 1px solid var(--color-border);
gap: .5rem;
}
.usercp-place-card__foot small {
color: var(--color-text-muted);
font-size: .75rem;
}
.usercp-place-card__hint {
font-size: .75rem;
color: var(--color-accent);
font-weight: 600;
}
.usercp__empty {
text-align: center;
padding: 3rem 1.5rem;
background: var(--color-bg-card);
border: 1px dashed var(--color-border-light);
border-radius: var(--radius);
color: var(--color-text-dim);
}
.usercp__empty > i:first-child {
font-size: 3rem;
color: var(--color-text-muted);
opacity: 0.4;
margin-bottom: 1rem;
display: block;
}
.usercp__empty h3 {
margin: 0 0 .5rem;
font-size: 1.2rem;
color: var(--color-text);
}
.usercp__empty p {
margin: 0 0 1.5rem;
font-size: .92rem;
}
@media (max-width: 1024px) {
.usercp {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 1.5rem 1rem 3rem;
}
.usercp__sidebar {
position: static;
top: auto;
}
.place-detail__layout,
.place-detail__grid {
grid-template-columns: 1fr !important;
}
.place-detail__sidebar {
position: static !important;
order: 2;
}
.place-detail__main { order: 1; }
.karte-page__layout,
.karte-page__grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 860px) {
.admincp,
.admincp__layout {
grid-template-columns: 1fr !important;
padding: 1rem !important;
}
.admincp__sidebar {
position: static !important;
top: auto !important;
margin-bottom: 1rem;
}
.admincp__nav ul {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.admincp__nav li { flex: 0 0 auto; }
.admincp__nav a { padding: .5rem .9rem; }
.usercp__sidebar-profile {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
align-items: center;
text-align: left;
gap: .4rem .8rem;
padding: 1rem;
}
.usercp__sidebar-profile .user-avatar--xl {
grid-column: 1;
grid-row: 1 / span 2;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
max-width: 56px;
max-height: 56px;
font-size: 1.1rem;
flex-shrink: 0;
}
.usercp__sidebar-name {
grid-column: 2;
grid-row: 1;
margin: 0;
font-size: 1rem;
word-break: break-word;
}
.usercp__sidebar-email {
grid-column: 2;
grid-row: 2;
font-size: .82rem;
word-break: break-all;
opacity: .8;
}
.usercp__sidebar-badge {
grid-column: 1 / -1;
margin: .5rem 0 0;
justify-self: start;
}
.usercp__sidebar-public-link {
grid-column: 1 / -1;
width: 100%;
text-align: center;
white-space: normal;
margin-top: .35rem;
}
.usercp__sidebar-nav ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .4rem;
padding: .6rem;
}
.usercp__sidebar-nav li { width: auto; }
.usercp__sidebar-link {
padding: .65rem .75rem !important;
font-size: .82rem;
justify-content: flex-start;
gap: .5rem;
}
.usercp__sidebar-link span {
display: inline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.usercp__sidebar-divider { display: none; }
.usercp__sidebar-foot { padding: .6rem; }
.place-detail__map-full,
.place-detail__hero-map,
.place-detail__map,
#place-detail-map {
height: 200px !important;
}
.place-detail__header h1 {
font-size: 1.6rem !important;
line-height: 1.2;
}
.place-detail__actions {
flex-direction: column;
gap: .5rem;
}
.place-detail__actions > * {
width: 100%;
}
.place-detail__actions .btn,
.place-detail__actions .inline-form .btn {
width: 100%;
justify-content: center;
}
.hero {
padding: 3rem 1rem 2.5rem !important;
min-height: auto;
}
.hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.hero p { font-size: 1rem; }
.stat-row {
grid-template-columns: repeat(2, 1fr) !important;
}
.usercp__grid {
grid-template-columns: 1fr !important;
}
.site-footer__inner {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
padding: 2rem 1rem !important;
}
}
@media (max-width: 720px) {
.topbar__inner {
padding: 0 .85rem !important;
}
.brand__text { font-size: 0.92rem; }
.brand__logo { width: 30px; height: 30px; }
.user-trigger { padding: .35rem .55rem !important; }
.user-trigger__name { display: none; }
.notif-btn {
width: 36px !important;
height: 36px !important;
}
.form-modern,
.auth-card,
.place-form,
.usercp__panel {
padding: 1.25rem 1rem !important;
}
.field-modern input,
.field-modern textarea,
.field-modern select {
font-size: 16px !important;
}
.place-detail__actions .btn {
flex: 1 1 100%;
}
.usercp-places-grid,
.place-cards-grid,
.places-grid {
grid-template-columns: 1fr !important;
}
.admin-tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: .25rem;
}
.admin-tab {
flex: 0 0 auto;
white-space: nowrap;
}
.modal {
padding: 0 !important;
align-items: stretch !important;
}
.modal__dialog {
max-height: 100vh !important;
max-width: 100% !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
}
.modal__header,
.modal__body,
.modal__footer {
padding: 1rem !important;
}
.cropper-area {
height: 260px !important;
}
.profile-avatar-edit {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1rem !important;
}
.profile-avatar-edit__forms {
width: 100%;
}
.profile-avatar-edit__forms .btn { width: 100%; justify-content: center; }
.profile-avatar-edit__forms .inline-form { width: 100%; display: block; }
body.is-fullscreen .leaflet-container {
height: calc(100vh - var(--topbar-h)) !important;
}
.map-overlay,
.map-overlay--top-left {
max-width: calc(100vw - 2rem) !important;
font-size: .85rem;
}
.comment .user-avatar {
width: 36px !important;
height: 36px !important;
font-size: .8rem;
}
.place-meta-box {
padding: 1rem !important;
}
.lightbox__btn {
width: 48px !important;
height: 48px !important;
font-size: 1.5rem !important;
}
.usercp__head h1,
.admincp__head h1 {
font-size: 1.5rem !important;
}
}
@media (max-width: 480px) {
body { font-size: 15px; }
.usercp,
.admincp {
padding: 1rem .75rem 3rem !important;
}
.stat-row {
grid-template-columns: 1fr !important;
}
.form-modern .btn,
.auth-card .btn--primary {
width: 100%;
justify-content: center;
}
.user-trigger { padding: .25rem !important; }
}
.notif-dropdown__foot {
display: block;
text-align: center;
padding: .75rem 1rem;
border-top: 1px solid var(--color-border);
color: var(--color-accent);
font-size: .85rem;
font-weight: 600;
text-decoration: none;
background: rgba(145, 70, 255,0.04);
transition: background .15s ease;
}
.notif-dropdown__foot:hover {
background: rgba(145, 70, 255,0.1);
color: var(--color-accent);
}
.notif-dropdown__foot i { margin-left: .35rem; font-size: .8em; }
.notif-page-tools {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .8rem;
margin-bottom: 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.notif-page-tools__count { color: var(--color-text-dim); font-size: .9rem; }
.notif-page-tools__count strong { color: var(--color-accent); font-weight: 700; }
.notif-page-tools__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.notif-page-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .5rem;
}
.notif-page-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color .15s ease;
}
.notif-page-item:hover { border-color: var(--color-border-light); }
.notif-page-item--unread {
background: rgba(255,255,255,0.03);
border-color: var(--color-border-light);
}
.notif-page-item__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(145, 70, 255,0.12);
color: var(--color-accent);
border-radius: var(--radius-sm);
font-size: 1.1rem;
}
.notif-page-item__body { flex: 1; min-width: 0; }
.notif-page-item__title {
display: block;
font-size: .98rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: .25rem;
line-height: 1.3;
}
.notif-page-item__title a {
color: inherit;
text-decoration: none;
}
.notif-page-item__title a:hover { color: var(--color-accent); }
.notif-page-item__text {
margin: 0 0 .35rem;
font-size: .88rem;
color: var(--color-text-dim);
line-height: 1.5;
}
.notif-page-item__time {
font-size: .75rem;
color: var(--color-text-muted);
}
.notif-page-item__side {
display: flex;
align-items: center;
gap: .5rem;
flex-shrink: 0;
}
.notif-page-item__dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
.notif-page-item__del {
background: transparent;
border: 0;
color: var(--color-text-muted);
cursor: pointer;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
transition: background .15s ease, color .15s ease;
}
.notif-page-item__del:hover {
background: rgba(229,75,75,0.15);
color: #fca5a5;
}
.pagination {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.pagination__link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-size: .9rem;
text-decoration: none;
transition: border-color .15s ease, background .15s ease;
}
.pagination__link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.pagination__current {
font-size: .9rem;
color: var(--color-text-dim);
}
#site-preloader {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--color-bg, #0a0a0a);
display: flex;
align-items: center;
justify-content: center;
transition: opacity .35s ease, visibility .35s ease;
}
#site-preloader.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.site-preloader__ring {
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.08);
border-top-color: var(--color-accent);
animation: preloader-spin 1s linear infinite;
display: flex;
align-items: center;
justify-content: center;
}
.site-preloader__logo {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
animation: preloader-counterspin 1s linear infinite;
}
@keyframes preloader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes preloader-counterspin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.profil {
max-width: var(--container);
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}
.profil__head {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-border);
}
.profil__avatar {
width: 120px;
height: 120px;
border-radius: var(--radius);
object-fit: cover;
object-position: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
flex-shrink: 0;
}
.profil__avatar--initial {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-accent);
background: var(--color-bg-card);
font-family: var(--font-display);
}
.profil__head-info { flex: 1; min-width: 0; }
.profil__name {
margin: 0 0 .5rem;
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.02em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .7rem;
line-height: 1.2;
}
.profil__badge {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .75rem;
font-weight: 700;
padding: .25rem .65rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.profil__badge--verified {
background: rgba(78, 192, 122, 0.15);
color: #6ed694;
border: 1px solid rgba(78, 192, 122, 0.4);
}
.profil__badge--admin {
background: rgba(145, 70, 255, 0.15);
color: var(--color-accent);
border: 1px solid rgba(145, 70, 255, 0.4);
}
.profil__joined {
margin: 0 0 .8rem;
color: var(--color-text-muted);
font-size: .9rem;
display: inline-flex;
align-items: center;
gap: .5rem;
}
.profil__joined i { color: var(--color-accent); }
.profil__bio {
margin: 0;
color: var(--color-text);
font-size: 1rem;
line-height: 1.55;
max-width: 60ch;
}
.profil__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: .8rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 2.5rem;
}
.profil__stat {
display: flex;
align-items: center;
gap: .7rem;
padding: .3rem .5rem;
min-width: 0;
}
.profil__stat-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(145, 70, 255, 0.1);
color: var(--color-accent);
border-radius: var(--radius-sm);
font-size: 1rem;
flex-shrink: 0;
}
.profil__stat-value {
display: block;
font-size: 1.35rem;
font-weight: 800;
color: var(--color-text);
line-height: 1.1;
letter-spacing: -0.02em;
}
.profil__stat-label {
display: block;
font-size: .75rem;
color: var(--color-text-muted);
margin-top: .15rem;
}
.profil__joined-days {
color: var(--color-text-dim);
}
.profil__section-title {
margin: 0 0 1.2rem;
font-size: 1.15rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .55rem;
letter-spacing: -0.01em;
}
.profil__section-title i { color: var(--color-accent); }
.profil__section-title small {
font-size: .85rem;
font-weight: 500;
color: var(--color-text-muted);
}
.profil__empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
}
.profil__empty i {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--color-text-dim);
display: block;
}
.profil__more-note {
text-align: center;
margin: 1.5rem 0 0;
font-size: .85rem;
color: var(--color-text-muted);
}
.comment__author-link {
color: inherit;
text-decoration: none;
transition: color .15s ease;
display: inline-flex;
align-items: center;
gap: .3rem;
}
.comment__author-link:hover { color: var(--color-accent); }
.comment__avatar a { display: block; }
.comment__author-link .comment__verified,
.comment__verified {
color: #6ed694 !important;
font-size: .75em;
}
@media (max-width: 720px) {
.profil__head {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.profil__name { justify-content: center; }
.profil__joined { justify-content: center; }
.profil__avatar { width: 100px; height: 100px; }
}
.kodex-rules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin: 2.5rem 0;
}
.kodex-rule {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.3rem 1.4rem;
}
.kodex-rule > i:first-child {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: rgba(145, 70, 255, 0.1);
color: var(--color-accent);
border-radius: var(--radius-sm);
font-size: 1rem;
margin-bottom: .8rem;
}
.kodex-rule h3 {
margin: 0 0 .5rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.kodex-rule p {
margin: 0;
color: var(--color-text-muted);
font-size: .92rem;
line-height: 1.55;
}
.kodex-verify {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
margin-top: 2rem;
}
.kodex-verify h2 {
margin: 0 0 .6rem;
font-size: 1.4rem;
}
.kodex-verify p {
margin: 0 0 1rem;
color: var(--color-text-muted);
}
.kodex-quiz {
max-width: 720px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.kodex-quiz__head { margin-bottom: 1.5rem; text-align: center; }
.kodex-quiz__back {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: .9rem;
margin-bottom: 1.2rem;
transition: color .15s ease;
}
.kodex-quiz__back:hover { color: var(--color-accent); }
.kodex-quiz__head h1 {
margin: 0 0 .7rem;
font-size: 2rem;
letter-spacing: -0.02em;
}
.kodex-quiz__head p {
color: var(--color-text-muted);
max-width: 540px;
margin: 0 auto;
line-height: 1.6;
font-size: .95rem;
}
.kodex-quiz__status {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.3rem;
margin-bottom: 1.5rem;
position: sticky;
top: calc(var(--topbar-h) + .5rem);
z-index: 50;
}
.kodex-quiz__status-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .7rem;
}
.kodex-quiz__status-current {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text);
}
.kodex-quiz__status-current span {
color: var(--color-accent);
font-size: 1.3rem;
}
.kodex-quiz__status-cat {
background: rgba(145, 70, 255, 0.1);
color: var(--color-accent);
padding: .25rem .7rem;
border-radius: 999px;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.kodex-quiz__progress-bar {
height: 6px;
background: var(--color-bg-input);
border-radius: 999px;
overflow: hidden;
}
.kodex-quiz__progress-bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--color-accent), #a970ff);
width: 0;
transition: width .4s ease;
}
.kodex-stepper {
position: relative;
}
.kodex-step {
display: none;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 2rem 2rem 1.5rem;
animation: kodex-fade-in .3s ease;
scroll-margin-top: calc(var(--topbar-h) + 140px);
}
.kodex-step.is-active { display: block; }
@keyframes kodex-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.kodex-step__question {
margin: 0 0 1.5rem;
font-size: 1.3rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--color-text);
}
.kodex-step__options {
display: flex;
flex-direction: column;
gap: .55rem;
}
.kodex-option {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: 1rem 1.1rem;
background: var(--color-bg-input);
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .15s ease;
}
.kodex-option:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--color-border-light);
}
.kodex-option input[type=radio] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.kodex-option__indicator {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--color-border-light);
background: transparent;
position: relative;
margin-top: 1px;
transition: all .15s ease;
}
.kodex-option__indicator::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--color-accent);
transform: scale(0);
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.kodex-option input:checked ~ .kodex-option__indicator {
border-color: var(--color-accent);
}
.kodex-option input:checked ~ .kodex-option__indicator::after {
transform: scale(1);
}
.kodex-option:has(input:checked) {
background: rgba(145, 70, 255, 0.08);
border-color: var(--color-accent);
}
.kodex-option__text {
flex: 1;
font-size: 1rem;
line-height: 1.45;
color: var(--color-text);
}
.kodex-quiz__nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.5rem;
gap: 1rem;
}
.kodex-quiz__nav .btn--primary {
margin-left: auto;
}
.kodex-quiz__result {
text-align: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 3rem 2rem;
margin-top: 2rem;
}
.kodex-quiz__result-icon {
width: 84px;
height: 84px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 2.2rem;
}
.kodex-quiz__result--pass {
border-color: rgba(78, 192, 122, 0.4);
}
.kodex-quiz__result--pass .kodex-quiz__result-icon {
background: rgba(78, 192, 122, 0.15);
color: #6ed694;
}
.kodex-quiz__result--fail {
border-color: rgba(229, 75, 75, 0.3);
}
.kodex-quiz__result--fail .kodex-quiz__result-icon {
background: rgba(229, 75, 75, 0.15);
color: #fca5a5;
}
.kodex-quiz__result h1 {
margin: 0 0 .8rem;
font-size: 2rem;
letter-spacing: -0.02em;
}
.kodex-quiz__score {
font-size: 1.3rem;
color: var(--color-text-muted);
margin: 0 0 1rem;
}
.kodex-quiz__score strong {
color: var(--color-text);
font-size: 1.6rem;
font-weight: 800;
}
.kodex-quiz__score small {
display: block;
font-size: .85rem;
margin-top: .25rem;
color: var(--color-text-dim);
}
.kodex-quiz__result-actions {
display: flex;
justify-content: center;
gap: .8rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.kodex-quiz__review {
text-align: left;
margin: 1.5rem 0;
background: var(--color-bg-input);
border-radius: var(--radius-sm);
padding: .9rem 1.2rem;
}
.kodex-quiz__review summary {
cursor: pointer;
font-weight: 600;
color: var(--color-text-muted);
user-select: none;
padding: .25rem 0;
}
.kodex-quiz__review-list {
margin: 1rem 0 0;
padding-left: 1.5rem;
}
.kodex-quiz__review-list li {
margin-bottom: 1rem;
color: var(--color-text);
}
.kodex-quiz__review-list small {
display: block;
margin-top: .3rem;
color: #6ed694;
font-size: .85rem;
}
.mainnav__item--has-children { position: relative; }
.mainnav__trigger {
background: none;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
.mainnav__caret {
font-size: .65em;
margin-left: .3rem;
opacity: .6;
transition: transform .2s ease;
}
.mainnav__item--has-children.is-open .mainnav__caret { transform: rotate(180deg); }
.mainnav__item--has-children.is-open .mainnav__trigger { color: var(--color-text); }
.mainnav__item--has-children.is-open .mainnav__trigger .mainnav__icon { color: var(--color-text-muted); }
.mainnav__dropdown {
position: absolute;
top: calc(100% + 17px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: .4rem;
min-width: 280px;
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 1000;
}
.mainnav__item--has-children.is-open .mainnav__dropdown {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
@media (max-width: 1100px) {
.mainnav__dropdown {
position: static;
transform: none;
left: auto;
opacity: 1;
pointer-events: auto;
background: rgba(255, 255, 255, 0.025);
border: 0;
border-left: 2px solid rgba(145, 70, 255, 0.35);
border-radius: 0;
margin: 0.2rem 0 0.4rem 1.2rem;
padding: 0;
min-width: 0;
box-shadow: none;
max-height: 0;
overflow: hidden;
transition: max-height .22s ease, padding .22s ease;
}
.mainnav__item--has-children.is-open .mainnav__dropdown {
max-height: 600px;
padding: 0.3rem;
transform: none;
}
}
.mainnav__sub {
display: flex;
align-items: flex-start;
gap: .8rem;
padding: .7rem .85rem;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--color-text);
transition: background .12s ease;
}
.mainnav__sub:hover {
background: rgba(255,255,255,0.04);
color: var(--color-text);
}
.mainnav__sub.is-active {
background: rgba(145, 70, 255,0.08);
}
.mainnav__sub-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(145, 70, 255,0.1);
color: var(--color-accent);
border-radius: var(--radius-sm);
font-size: .95rem;
margin-top: 1px;
}
.mainnav__sub-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.mainnav__sub-text strong {
font-size: .92rem;
font-weight: 600;
color: var(--color-text);
display: inline-flex;
align-items: center;
gap: .5rem;
}
.mainnav__sub-text small {
font-size: .78rem;
color: var(--color-text-muted);
margin-top: .15rem;
}
.mainnav__sub-badge {
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(145, 70, 255,0.15);
color: var(--color-accent);
padding: .15rem .45rem;
border-radius: 999px;
border: 1px solid rgba(145, 70, 255,0.3);
}
.overnight-soon {
max-width: var(--container);
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
}
.overnight-soon__hero {
text-align: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 3.5rem 2rem;
margin: 2.5rem 0 3rem;
}
.overnight-soon__icon {
width: 96px;
height: 96px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(145, 70, 255,0.12);
color: var(--color-accent);
border-radius: 50%;
font-size: 2.6rem;
}
.overnight-soon__hero h2 {
margin: 0 0 .8rem;
font-size: 1.6rem;
letter-spacing: -0.02em;
}
.overnight-soon__hero p {
color: var(--color-text-muted);
margin: 0 auto;
max-width: 480px;
line-height: 1.6;
}
.overnight-soon__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.2rem;
}
.overnight-soon__feature {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.5rem 1.6rem;
}
.overnight-soon__feature > i:first-child {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(145, 70, 255,0.1);
color: var(--color-accent);
border-radius: var(--radius-sm);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.overnight-soon__feature h3 {
margin: 0 0 .55rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.overnight-soon__feature p {
margin: 0;
color: var(--color-text-muted);
font-size: .92rem;
line-height: 1.55;
}
.urbex-cluster {
background: transparent !important;
border: none !important;
text-align: center;
line-height: 1;
}
.urbex-cluster__inner {
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
justify-content: center;
background: rgba(31, 31, 31, 0.92) !important;
color: var(--color-text);
border: 2px solid var(--color-accent) !important;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(145, 70, 255, 0.12),
0 4px 14px rgba(0, 0, 0, 0.35);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.01em;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.urbex-cluster__inner span {
color: var(--color-text);
font: inherit;
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.urbex-cluster:hover .urbex-cluster__inner {
background: rgba(40, 40, 40, 0.95) !important;
box-shadow:
0 0 0 7px rgba(145, 70, 255, 0.22),
0 6px 18px rgba(0, 0, 0, 0.45);
transform: translateY(-1px);
}
.urbex-cluster--sm .urbex-cluster__inner { font-size: 0.70rem; }
.urbex-cluster--md .urbex-cluster__inner { font-size: 0.80rem; }
.urbex-cluster--lg .urbex-cluster__inner { font-size: 0.90rem; border-width: 3px !important; }
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.user-marker {
background: transparent !important;
border: none !important;
text-align: center;
line-height: 1;
}
.user-marker__pin {
width: 28px;
height: 28px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 5px rgba(255, 255, 255, 0.18),
0 2px 8px rgba(0, 0, 0, 0.35);
}
.user-marker__pin i {
color: #1a1a1a;
font-size: 11px;
}
.map-popup__dist {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--color-text);
font-size: 0.82rem;
margin-top: 0.35rem;
}
.map-popup__dist i {
color: var(--color-accent);
font-size: 0.9em;
}
.map-search__clear {
background: none;
border: 0;
color: var(--color-text-muted);
padding: .5rem .9rem .5rem .4rem;
cursor: pointer;
font-size: 0.9rem;
transition: color .15s ease;
}
.map-search__clear:hover {
color: var(--color-accent);
}
.map-search__suggestions {
list-style: none;
margin: .4rem 0 0;
padding: .3rem 0;
background: rgba(20, 20, 20, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
max-height: 320px;
overflow-y: auto;
}
.map-search__suggestions li {
display: flex;
align-items: center;
gap: .65rem;
padding: .55rem .9rem;
cursor: pointer;
color: var(--color-text);
transition: background .12s ease;
border-left: 3px solid transparent;
}
.map-search__suggestions li:hover {
background: rgba(145, 70, 255, 0.08);
border-left-color: var(--color-accent);
}
.map-search__suggestions li i {
color: var(--color-accent);
width: 1em;
text-align: center;
flex-shrink: 0;
}
.map-search__suggestions li span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.92rem;
}
.map-search__suggestions li small {
color: var(--color-text-muted);
font-size: 0.78rem;
flex-shrink: 0;
margin-left: auto;
}
.map-fab__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--color-accent);
color: #1a1a1a;
font-size: 0.65rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.map-fab__badge[hidden] {
display: none;
}
#filter-btn {
bottom: calc(1.25rem + (46px + 0.5rem) * 2);
}
.map-fab-menu.map-fab-menu--top {
bottom: calc(1.25rem + (46px + 0.5rem) * 3);
}
.map-fab-menu.map-fab-menu--top .map-fab--secondary {
position: relative;
right: auto;
bottom: auto;
}
/* === Speed-Dial Layer-Switcher (3 FAB-Buttons links neben Layer-FAB) === */
.map-fab-dial {
position: fixed;
right: 1.25rem;
bottom: calc(1.25rem + (46px + 0.5rem) * 3);
z-index: 1001;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Der Trigger-FAB selbst (Layer-Icon) soll nicht doppelt fixed-positioniert sein */
.map-fab-dial > .map-fab--secondary {
position: relative;
right: auto;
bottom: auto;
}
.map-fab-dial__options {
display: flex;
gap: 0.5rem;
align-items: center;
/* eingeklappt: nicht sichtbar, nicht klickbar */
opacity: 0;
visibility: hidden;
transform: translateX(12px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.map-fab-dial.is-open .map-fab-dial__options {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
/* Die einzelnen Optionen sind ganz normale map-fab--secondary Buttons,
nur eben nicht fixed sondern in der Flex-Reihe */
.map-fab-dial__options .map-fab {
position: relative;
right: auto;
bottom: auto;
}
/* Aktiver Layer: orange wie der Primary-Button */
.map-fab-dial__options .map-fab.map-fab--dial-active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #1a1a1a;
}
/* Primary-Variante: sitzt ganz unten rechts (für den +-Eintragen-Button) */
.map-fab-dial--primary {
bottom: 1.25rem;
}
.map-fab-menu__check {
color: var(--color-accent);
margin-left: auto;
font-size: 0.95rem;
opacity: 0;
transition: opacity .15s ease;
}
.map-fab-menu__item.is-active .map-fab-menu__check {
opacity: 1;
}
.map-fab-menu__item.is-active {
background: rgba(145, 70, 255, 0.08);
}
.map-fab-menu__item.is-active > i:first-child {
color: var(--color-accent);
}
.map-fab-menu button.map-fab-menu__item {
background: none;
border: 0;
width: 100%;
text-align: left;
font: inherit;
cursor: pointer;
color: var(--color-text);
}
.map-fab-menu {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 500;
}
.map-fab-menu .map-fab--primary {
position: relative;
right: auto;
bottom: auto;
}
.map-fab-menu__panel {
position: absolute;
bottom: calc(100% + 0.5rem);
right: 0;
min-width: 260px;
background: rgba(20, 20, 20, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
padding: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
animation: fab-menu-in 0.18s ease;
}
.map-fab-menu__panel[hidden] {
display: none;
}
@keyframes fab-menu-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.map-fab-menu__item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 0.85rem;
border-radius: var(--radius-sm);
color: var(--color-text);
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.map-fab-menu__item:hover {
background: rgba(145, 70, 255, 0.08);
color: var(--color-accent);
}
.map-fab-menu__item > i {
color: var(--color-accent);
font-size: 1.05rem;
width: 1.3em;
text-align: center;
}
.map-fab-menu__item span {
flex: 1;
display: flex;
flex-direction: column;
}
.map-fab-menu__item strong {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
}
.map-fab-menu__item small {
color: var(--color-text-muted);
font-size: 0.78rem;
margin-top: 0.15rem;
}
.map-fab-menu__item--soon {
opacity: 0.65;
}
.map-fab-menu__item--soon:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--color-text);
}
.map-fab-menu__soon-tag {
background: rgba(145, 70, 255, 0.18);
color: var(--color-accent);
font-size: 0.65rem;
font-style: normal;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.filter-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.filter-modal[hidden] {
display: none;
}
.filter-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.filter-modal__box {
position: relative;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 2rem);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--color-bg-elevated, #1f1f1f);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.filter-modal__close {
position: absolute;
top: 0.8rem;
right: 0.9rem;
background: none;
border: 0;
color: var(--color-text-muted);
font-size: 1.1rem;
cursor: pointer;
padding: 0.4rem;
border-radius: var(--radius-sm);
transition: color .15s ease, background .15s ease;
z-index: 1;
}
.filter-modal__close:hover {
color: var(--color-accent);
background: rgba(145, 70, 255, 0.08);
}
.filter-modal__title {
margin: 0;
padding: 1.4rem 1.5rem 0.4rem;
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--color-text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-modal__title i {
color: var(--color-accent);
font-size: 0.95em;
}
.filter-modal__intro {
margin: 0;
padding: 0 1.5rem 0.8rem;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.filter-modal__quick {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 1.5rem 0.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.filter-modal__quick-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--color-text);
padding: 0.35rem 0.8rem;
border-radius: 999px;
font-size: 0.82rem;
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.filter-modal__quick-btn:hover {
background: rgba(145, 70, 255, 0.1);
border-color: rgba(145, 70, 255, 0.35);
color: var(--color-accent);
}
.filter-modal__list {
list-style: none;
margin: 0;
padding: 0.4rem 0;
overflow-y: auto;
flex: 1;
}
.filter-modal__list li {
padding: 0;
}
.filter-modal__list li.filter-modal__sep {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 0.4rem 1.5rem;
}
.filter-modal__list label {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.55rem 1.5rem;
cursor: pointer;
transition: background .1s ease;
}
.filter-modal__list label:hover {
background: rgba(255, 255, 255, 0.03);
}
.filter-modal__list input[type=checkbox] {
width: 18px;
height: 18px;
accent-color: var(--color-accent);
cursor: pointer;
flex-shrink: 0;
}
.filter-modal__list label > i {
color: var(--color-accent);
width: 1.3em;
text-align: center;
flex-shrink: 0;
}
.filter-modal__name {
flex: 1;
color: var(--color-text);
font-size: 0.92rem;
}
.filter-modal__count {
color: var(--color-text-muted);
font-size: 0.78rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.filter-modal__foot {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.filter-modal__btn {
padding: 0.55rem 1.1rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.filter-modal__btn--ghost {
background: transparent;
color: var(--color-text-muted);
border-color: rgba(255, 255, 255, 0.1);
}
.filter-modal__btn--ghost:hover {
color: var(--color-text);
border-color: rgba(255, 255, 255, 0.25);
}
.filter-modal__btn--primary {
background: var(--color-accent);
color: #1a1a1a;
}
.filter-modal__btn--primary:hover {
background: var(--color-accent-hover);
}
.map-search__suggestions[hidden],
.map-search__clear[hidden] { display: none !important; }
.liste-page {
padding: 2rem 1rem 4rem;
min-height: calc(100vh - var(--topbar-h));
}
.liste-container {
max-width: 980px;
margin: 0 auto;
}
.liste-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.liste-title {
margin: 0;
font-family: var(--font-display);
font-size: 1.7rem;
color: var(--color-text);
display: flex;
align-items: center;
gap: 0.55rem;
}
.liste-title i {
color: var(--color-accent);
}
.liste-sub {
margin: 0.3rem 0 0;
color: var(--color-text-muted);
font-size: 0.92rem;
}
.liste-tools {
display: flex;
gap: 0.8rem;
margin-bottom: 1.2rem;
flex-wrap: wrap;
align-items: center;
}
.liste-search {
flex: 1;
min-width: 240px;
display: flex;
align-items: center;
gap: 0.6rem;
background: var(--color-bg-input, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
border-radius: var(--radius);
padding: 0.2rem 0.9rem;
transition: border-color .15s ease;
}
.liste-search:focus-within {
border-color: var(--color-accent);
}
.liste-search > i {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.liste-search input {
flex: 1;
background: none;
border: 0;
color: var(--color-text);
padding: 0.7rem 0;
font-size: 0.95rem;
}
.liste-search input:focus { outline: none; }
.liste-search__clear {
background: none;
border: 0;
color: var(--color-text-muted);
padding: 0.35rem 0.4rem;
cursor: pointer;
transition: color .15s ease;
}
.liste-search__clear:hover { color: var(--color-accent); }
.liste-sort {
display: flex;
align-items: center;
gap: 0.5rem;
}
.liste-sort__label {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.liste-sort__select {
background: var(--color-bg-input, rgba(255, 255, 255, 0.04));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
border-radius: var(--radius);
color: var(--color-text);
padding: 0.6rem 2rem 0.6rem 0.9rem;
font-size: 0.92rem;
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
}
.liste-sort__select:focus {
outline: none;
border-color: var(--color-accent);
}
.liste-hint {
background: rgba(145, 70, 255, 0.08);
border: 1px solid rgba(145, 70, 255, 0.25);
border-radius: var(--radius);
padding: 0.75rem 1rem;
color: var(--color-text);
font-size: 0.9rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.liste-hint[hidden] { display: none; }
.liste-hint > span { flex: 1; }
.liste-hint i { color: var(--color-accent); }
.liste-hint a { color: var(--color-accent); text-decoration: underline; }
.liste-hint__btn {
background: var(--color-accent);
color: #1a1a1a;
border: 0;
border-radius: var(--radius-sm);
padding: 0.4rem 0.85rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background .15s ease;
}
.liste-hint__btn:hover {
background: var(--color-accent-hover);
}
.liste-hint__btn--close {
background: transparent;
color: var(--color-text-muted);
padding: 0.3rem 0.5rem;
font-size: 0.95rem;
}
.liste-hint__btn--close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-text);
}
.liste-hint--success {
background: rgba(78, 192, 122, 0.08);
border-color: rgba(78, 192, 122, 0.25);
}
.liste-hint--success i { color: var(--color-success); }
.liste-hint--success strong { color: var(--color-text); }
.liste-count {
margin: 0 0 0.8rem;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.liste-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.liste-item {
background: var(--color-bg-card, rgba(255, 255, 255, 0.025));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
border-radius: var(--radius);
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.liste-item:hover {
background: rgba(145, 70, 255, 0.05);
border-color: rgba(145, 70, 255, 0.3);
transform: translateY(-1px);
}
.liste-item__link {
display: flex;
flex-direction: row-reverse;
gap: 1rem;
padding: 0.85rem 1rem;
text-decoration: none;
color: var(--color-text);
align-items: center;
}
.liste-item__main {
flex: 1;
min-width: 0;
}
.liste-item__title {
margin: 0 0 0.4rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.liste-item:hover .liste-item__title {
color: var(--color-accent);
}
.liste-item__meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.liste-item__meta i {
margin-right: 0.3rem;
color: var(--color-text-muted);
font-size: 0.85em;
}
.liste-item__id,
.liste-item__cat,
.liste-item__count,
.liste-item__dist {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.liste-item__dist[hidden] { display: none; }
.liste-item__dist i {
color: var(--color-accent);
}
.liste-item__dist .liste-item__dist-value {
color: var(--color-text);
}
.liste-item__cover {
width: 96px;
height: 64px;
background-size: cover;
background-position: center;
background-color: rgba(255, 255, 255, 0.03);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.liste-item__cover--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 1.4rem;
opacity: 0.4;
}
.liste-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-text-muted);
}
.liste-empty i {
font-size: 2rem;
color: var(--color-text-muted);
opacity: 0.4;
display: block;
margin-bottom: 0.6rem;
}
.liste-empty p { margin: 0; }
@media (max-width: 640px) {
.liste-item__cover { width: 72px; height: 56px; }
.liste-item__title { font-size: 0.97rem; }
.liste-item__meta { gap: 0.7rem; font-size: 0.8rem; }
.liste-tools { flex-direction: column; align-items: stretch; }
.liste-sort { justify-content: space-between; }
}
.picker-layer-toggle {
background: rgba(20, 20, 20, 0.85);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
color: var(--color-text);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
padding: 0.45rem 0.75rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-family: inherit;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.picker-layer-toggle:hover {
border-color: rgba(145, 70, 255, 0.5);
color: var(--color-accent);
background: rgba(20, 20, 20, 0.95);
}
.picker-layer-toggle i {
font-size: 0.95em;
}
.profil__socials {
list-style: none;
margin: 0.8rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.profil__social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--color-text);
text-decoration: none;
font-size: 0.85rem;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.profil__social i {
font-size: 1em;
color: var(--color-accent);
}
.profil__social:hover {
background: rgba(145, 70, 255, 0.08);
border-color: rgba(145, 70, 255, 0.35);
}
.form-modern__subhead {
margin: 1.5rem 0 0.8rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--color-text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-modern__subhead i {
color: var(--color-accent);
}
.account-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.account-info-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.85rem 1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
}
.account-info-item__label {
color: var(--color-text-muted);
font-size: 0.82rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.account-info-item__label i {
color: var(--color-accent);
}
.account-info-item__value {
color: var(--color-text);
font-weight: 500;
word-break: break-word;
}
.usercp__sidebar-public-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.85rem;
padding: 0.4rem 0.75rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.8rem;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.usercp__sidebar-public-link:hover {
background: rgba(145, 70, 255, 0.08);
border-color: rgba(145, 70, 255, 0.3);
color: var(--color-accent);
}
.usercp__sidebar-public-link i {
font-size: 0.85em;
}
.profil__section-title {
margin: 2rem 0 1rem;
font-family: var(--font-display);
font-size: 1.15rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-text);
}
.profil__section-title i {
color: var(--color-accent);
}
.profil__section-title small {
color: var(--color-text-muted);
font-size: 0.85rem;
font-weight: normal;
}
.profil__comments {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.profil__comment {
padding: 0.9rem 1.1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
}
.profil__comment-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.4rem;
flex-wrap: wrap;
}
.profil__comment-place {
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.profil__comment-place:hover {
text-decoration: underline;
}
.profil__comment-date {
color: var(--color-text-muted);
font-size: 0.8rem;
}
.profil__comment-text {
color: var(--color-text-muted);
font-size: 0.92rem;
margin: 0;
line-height: 1.5;
}
.profil__empty {
padding: 2rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
text-align: center;
color: var(--color-text-muted);
}
.profil__empty i {
font-size: 2rem;
color: rgba(255, 255, 255, 0.15);
display: block;
margin-bottom: 0.6rem;
}
.profil__empty p {
margin: 0;
}
.region-page {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.region-page__breadcrumb {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.85rem; color: var(--color-text-muted);
margin-bottom: 1rem;
}
.region-page__breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.region-page__breadcrumb a:hover { color: var(--color-accent); }
.region-page__breadcrumb i { font-size: 0.7em; }
.region-page__head h1 {
font-family: var(--font-display);
font-size: 2.2rem;
margin: 0 0 1rem;
}
.region-page__lead {
color: var(--color-text-muted);
font-size: 1.05rem; line-height: 1.6;
max-width: 780px; margin: 0 0 1.5rem;
}
.region-page__stats {
display: flex; align-items: flex-start;
gap: 2rem; flex-wrap: wrap;
padding: 1.2rem 1.4rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
margin-bottom: 2rem;
}
.region-page__stat { display: flex; flex-direction: column; gap: 0.2rem; }
.region-page__stat strong {
font-size: 1.6rem; color: var(--color-accent);
font-family: var(--font-display);
}
.region-page__stat span { font-size: 0.85rem; color: var(--color-text-muted); }
.region-page__stat--cats { flex: 1; min-width: 250px; }
.region-page__catpills {
display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem;
}
.region-page__catpill {
font-size: 0.82rem; padding: 0.3rem 0.65rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
color: var(--color-accent);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.region-page__catpill em {
color: var(--color-text-muted); font-style: normal; font-size: 0.8em;
}
.region-page__section-title {
font-family: var(--font-display); font-size: 1.35rem;
margin: 2rem 0 1rem;
display: flex; align-items: center; gap: 0.5rem;
}
.region-page__section-title i { color: var(--color-accent); }
.region-page__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.region-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
overflow: hidden;
transition: transform .15s ease, border-color .15s ease;
}
.region-card:hover {
transform: translateY(-2px);
border-color: rgba(145, 70, 255, 0.3);
}
.region-card__cover-link { display: block; }
.region-card__cover {
position: relative; aspect-ratio: 16/10;
background: #1a1a1a center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
color: rgba(255, 255, 255, 0.15); font-size: 2rem;
}
.region-card__id {
position: absolute; bottom: 0.5rem; right: 0.5rem;
background: rgba(0, 0, 0, 0.7); color: #fff;
padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
font-size: 0.75rem; font-weight: 600;
}
.region-card__body { padding: 0.9rem 1rem; }
.region-card__title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; }
.region-card__title a { color: var(--color-text); text-decoration: none; }
.region-card__title a:hover { color: var(--color-accent); }
.region-card__location {
margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--color-text-muted);
}
.region-card__location i { color: var(--color-accent); }
.region-card__meta {
display: flex; justify-content: space-between;
font-size: 0.8rem; color: var(--color-text-muted);
}
.region-page__empty {
padding: 3rem 1.5rem; text-align: center;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
}
.region-page__empty > i {
font-size: 2.5rem; color: rgba(255, 255, 255, 0.15);
display: block; margin-bottom: 0.8rem;
}
.region-page__empty h2 { font-family: var(--font-display); margin: 0 0 0.5rem; }
.region-page__empty p { color: var(--color-text-muted); margin: 0 0 1.2rem; }
.region-page__more-note {
color: var(--color-text-muted); font-size: 0.9rem;
margin: 1.2rem 0 0; text-align: center;
}
.region-page__crosslinks {
margin-top: 3.5rem; padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.region-page__crosslinks h2 {
font-family: var(--font-display); font-size: 1.15rem;
margin: 0 0 1rem;
display: flex; align-items: center; gap: 0.5rem;
}
.region-page__crosslinks h2 i { color: var(--color-accent); }
.region-page__crosslinks ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.4rem 1rem;
}
.region-page__crosslinks a {
color: var(--color-text-muted); text-decoration: none;
font-size: 0.88rem; padding: 0.3rem 0; display: inline-block;
}
.region-page__crosslinks a:hover { color: var(--color-accent); }
.site-footer__col--states {
flex: 1.5;
min-width: 260px;
}
.site-footer__list--states {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.4rem;
font-size: 0.78rem;
}
.site-footer__list--states li {
margin: 0;
padding: 0;
}
.site-footer__list--states a {
display: inline-block;
padding: 0.2rem 0.55rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.site-footer__list--states a:hover {
background: rgba(145, 70, 255, 0.08);
border-color: rgba(145, 70, 255, 0.25);
color: var(--color-accent);
}
.place-detail__map-locked {
height: 360px;
width: 100%;
border-radius: var(--radius);
border: 1px dashed rgba(145, 70, 255, 0.35);
background:
radial-gradient(circle at center, rgba(145, 70, 255, 0.05), transparent 60%),
var(--color-bg-input, #161616);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
}
.place-detail__map-locked-icon {
font-size: 2.2rem;
color: var(--color-accent);
margin-bottom: 0.8rem;
}
.place-detail__map-locked strong {
display: block;
font-family: var(--font-display);
font-size: 1.25rem;
margin-bottom: 0.4rem;
}
.place-detail__map-locked span {
display: block;
color: var(--color-text-muted);
max-width: 420px;
margin: 0 auto 1.2rem;
line-height: 1.5;
}
@media (max-width: 640px) {
.place-detail__map-locked { height: 260px; padding: 1.2rem; }
.place-detail__map-locked-icon { font-size: 1.8rem; }
.place-detail__map-locked strong { font-size: 1.05rem; }
}
.place-paywall-banner {
display: flex; align-items: center;
gap: 1.2rem; flex-wrap: wrap;
padding: 1.2rem 1.5rem;
background: linear-gradient(135deg, rgba(145, 70, 255, 0.08), rgba(145, 70, 255, 0.03));
border: 1px solid rgba(145, 70, 255, 0.3);
border-radius: var(--radius);
margin: 0 0 2rem;
}
.place-paywall-banner--inline { margin: 0; }
.place-paywall-banner__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(145, 70, 255, 0.15);
color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.place-paywall-banner__text { flex: 1; min-width: 220px; }
.place-paywall-banner__text strong {
display: block; font-family: var(--font-display); font-size: 1.05rem;
margin-bottom: 0.2rem;
}
.place-paywall-banner__text span {
color: var(--color-text-muted); font-size: 0.9rem;
line-height: 1.5;
}
.place-paywall-banner__cta {
display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.place-detail__teaser-cta {
margin-top: 1rem; padding: 0.85rem 1rem;
background: rgba(145, 70, 255, 0.06);
border: 1px solid rgba(145, 70, 255, 0.2);
border-radius: var(--radius);
display: flex; align-items: center;
gap: 0.8rem; flex-wrap: wrap;
}
.place-detail__teaser-cta i { color: var(--color-accent); }
.place-detail__teaser-cta span { flex: 1; min-width: 200px; }
.place-detail__teaser-cta .btn { flex-shrink: 0; }
.place-gallery--locked {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.place-gallery__item--locked {
background: rgba(145, 70, 255, 0.06);
border: 1px dashed rgba(145, 70, 255, 0.3);
border-radius: var(--radius);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-decoration: none; color: var(--color-text);
aspect-ratio: 16/10;
transition: background .15s ease;
}
.place-gallery__item--locked:hover {
background: rgba(145, 70, 255, 0.12);
}
.place-gallery__item--locked i {
font-size: 1.5rem; color: var(--color-accent);
margin-bottom: 0.5rem;
}
.place-gallery__item--locked strong {
font-family: var(--font-display);
font-size: 1.05rem;
}
.place-gallery__item--locked span {
color: var(--color-text-muted); font-size: 0.85rem;
}
.place-meta__value--locked {
color: var(--color-text-muted);
font-style: italic;
}
.place-meta__value--locked i {
color: var(--color-accent);
margin-right: 0.3rem;
}
.home-stats {
padding: 1.25rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.home-stats__inner {
max-width: 1200px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
@media (max-width: 1100px) {
.home-stats__inner {
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
}
@media (max-width: 600px) {
.home-stats__inner {
grid-template-columns: repeat(2, 1fr);
gap: .6rem;
}
}
@media (max-width: 380px) {
.home-stats__inner {
grid-template-columns: 1fr;
}
}
.home-stat {
display: flex;
align-items: center;
gap: .75rem;
text-align: left;
}
.home-stat__icon {
color: var(--color-accent);
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
}
.home-stat__body {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
}
.home-stat strong {
display: block;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--color-accent);
line-height: 1;
}
.home-stat__label {
color: var(--color-text-muted);
font-size: 0.78rem;
}
.home-about {
padding: 4rem 1.5rem;
}
.home-about__inner {
max-width: 880px; margin: 0 auto;
}
.home-about h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 5.5vw, 2rem);
margin: 0 0 1.5rem;
}
.home-about p {
color: var(--color-text-muted);
line-height: 1.7;
margin: 0 0 1.2rem;
font-size: 1.02rem;
}
.home-about strong {
color: var(--color-text);
}
.home-states {
padding: 4rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
}
.home-states__inner {
max-width: 1100px; margin: 0 auto;
}
.home-states h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 5.5vw, 2rem);
margin: 0 0 0.8rem;
text-align: center;
}
.home-states__lead {
color: var(--color-text-muted);
max-width: 700px; margin: 0 auto 2rem;
text-align: center; line-height: 1.6;
}
.home-states__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.8rem;
}
.home-state-card {
display: flex; align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
color: var(--color-text);
text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.home-state-card:hover {
background: rgba(145, 70, 255, 0.06);
border-color: rgba(145, 70, 255, 0.3);
transform: translateY(-1px);
}
.home-state-card i { color: var(--color-accent); }
.home-latest {
padding: 4rem 1.5rem;
}
.home-latest__inner {
max-width: 1100px; margin: 0 auto;
}
.home-latest h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 5.5vw, 2rem);
margin: 0 0 0.5rem;
text-align: center;
}
.home-latest__lead {
color: var(--color-text-muted);
text-align: center;
margin: 0 0 2rem;
}
.home-latest__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.home-place-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
overflow: hidden;
transition: transform .15s ease, border-color .15s ease;
}
.home-place-card:hover {
transform: translateY(-2px);
border-color: rgba(145, 70, 255, 0.3);
}
.home-place-card__link {
display: block;
text-decoration: none;
color: var(--color-text);
}
.home-place-card__cover {
aspect-ratio: 16/10;
background: #1a1a1a center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
color: rgba(255, 255, 255, 0.15); font-size: 2rem;
}
.home-place-card__body { padding: 0.9rem 1rem; }
.home-place-card__body h3 {
margin: 0 0 0.4rem;
font-size: 1rem;
font-weight: 600;
}
.home-place-card__loc {
margin: 0 0 0.4rem;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.home-place-card__loc i { color: var(--color-accent); }
.home-place-card__cat {
font-size: 0.82rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--color-accent);
}
.home-faq {
padding: 4rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
}
.home-faq__inner {
max-width: 880px; margin: 0 auto;
}
.home-faq h2 {
font-family: var(--font-display);
font-size: 2rem;
margin: 0 0 1.5rem;
text-align: center;
}
.home-faq__item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
margin-bottom: 0.6rem;
overflow: hidden;
}
.home-faq__item summary {
padding: 1rem 1.2rem;
cursor: pointer;
font-weight: 600;
font-family: var(--font-display);
list-style: none;
position: relative;
padding-right: 3rem;
transition: background .15s ease;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after {
content: '+';
position: absolute;
right: 1.2rem; top: 50%;
transform: translateY(-50%);
color: var(--color-accent);
font-size: 1.5rem;
transition: transform .2s ease;
}
.home-faq__item[open] summary::after {
content: '−';
}
.home-faq__item summary:hover {
background: rgba(145, 70, 255, 0.04);
}
.home-faq__item p {
padding: 0 1.2rem 1.2rem;
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
}
.features__title {
font-family: var(--font-display);
font-size: 2rem;
margin: 0 0 2rem;
text-align: center;
max-width: var(--container);
margin-left: auto;
margin-right: auto;
}
.urbex-directory {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.urbex-directory__head {
text-align: center;
margin-bottom: 2.5rem;
}
.urbex-directory__head h1 {
font-family: var(--font-display);
font-size: 2rem;
margin: 0.5rem 0 1rem;
line-height: 1.2;
}
.urbex-directory__head p {
color: var(--color-text-muted);
max-width: 680px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.urbex-directory__empty {
padding: 3rem 1.5rem;
text-align: center;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
}
.urbex-directory__empty i {
font-size: 2.5rem;
color: rgba(255, 255, 255, 0.15);
display: block;
margin-bottom: 0.8rem;
}
.urbex-directory__empty h2 {
font-family: var(--font-display);
margin: 0 0 0.5rem;
}
.urbex-directory__empty p {
color: var(--color-text-muted);
margin: 0 0 1.2rem;
}
.urbex-directory__more {
text-align: center;
color: var(--color-text-muted);
font-size: 0.85rem;
margin: 1.5rem 0 0;
}
.urbex-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.urbex-card {
display: grid;
grid-template-columns: auto 64px 1fr auto;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
transition: border-color .15s ease, background .15s ease;
}
.urbex-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(145, 70, 255, 0.2);
}
.urbex-card__rank {
font-family: var(--font-display);
color: var(--color-text-muted);
font-size: 1.1rem;
width: 36px;
text-align: center;
}
.urbex-card__avatar {
display: block;
width: 64px;
height: 64px;
border-radius: var(--radius);
overflow: hidden;
background: rgba(145, 70, 255, 0.08);
flex-shrink: 0;
}
.urbex-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.urbex-card__avatar-initial {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
}
.urbex-card__body {
min-width: 0;
}
.urbex-card__name-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
flex-wrap: wrap;
}
.urbex-card__name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
}
.urbex-card__name:hover {
color: var(--color-accent);
}
.urbex-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
line-height: 1;
}
.urbex-badge--verified {
color: #6ed694;
}
.urbex-badge--admin {
color: var(--color-accent);
}
.urbex-card__bio {
color: var(--color-text-muted);
font-size: 0.88rem;
margin: 0 0 0.5rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.urbex-card__socials {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.urbex-social {
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
text-decoration: none;
transition: all .15s ease;
}
.urbex-social:hover {
background: rgba(145, 70, 255, 0.1);
border-color: rgba(145, 70, 255, 0.3);
color: var(--color-accent);
transform: translateY(-1px);
}
.urbex-card__stats {
display: flex;
align-items: center;
gap: 0.7rem;
flex-shrink: 0;
}
.urbex-stat {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.6rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.85rem;
}
.urbex-stat i { font-size: 0.8em; }
.urbex-stat__count { font-weight: 600; color: var(--color-text); }
.urbex-stat--likes i { color: #ff6b6b; }
.urbex-like {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.85rem;
cursor: pointer;
transition: all .15s ease;
font-family: inherit;
}
.urbex-like:hover:not(:disabled) {
background: rgba(255, 107, 107, 0.08);
border-color: rgba(255, 107, 107, 0.3);
color: #ff6b6b;
}
.urbex-like.is-liked {
background: rgba(255, 107, 107, 0.12);
border-color: rgba(255, 107, 107, 0.4);
color: #ff6b6b;
}
.urbex-like.is-liked i { color: #ff6b6b; }
.urbex-like:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 720px) {
.urbex-card {
grid-template-columns: auto 56px 1fr;
grid-template-rows: auto auto;
gap: 0.6rem 0.8rem;
}
.urbex-card__rank { font-size: 1rem; width: 28px; }
.urbex-card__avatar { width: 56px; height: 56px; }
.urbex-card__stats {
grid-column: 1 / -1;
justify-content: flex-end;
padding-top: 0.4rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 0.3rem;
}
.urbex-card__bio { -webkit-line-clamp: 3; }
}
.usercp-toggle-row {
margin: 1.5rem 0;
padding: 1rem 1.2rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
}
.usercp-toggle {
display: flex;
align-items: flex-start;
gap: 0.9rem;
cursor: pointer;
}
.usercp-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.usercp-toggle__switch {
flex-shrink: 0;
width: 42px;
height: 24px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
position: relative;
margin-top: 2px;
transition: background .15s ease, border-color .15s ease;
}
.usercp-toggle__switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
background: var(--color-text-muted);
border-radius: 50%;
transition: transform .15s ease, background .15s ease;
}
.usercp-toggle input[type="checkbox"]:checked ~ .usercp-toggle__switch {
background: rgba(145, 70, 255, 0.3);
border-color: rgba(145, 70, 255, 0.5);
}
.usercp-toggle input[type="checkbox"]:checked ~ .usercp-toggle__switch::after {
transform: translateX(18px);
background: var(--color-accent);
}
.usercp-toggle__label strong {
display: block;
font-family: var(--font-display);
margin-bottom: 0.25rem;
}
.usercp-toggle__label small {
color: var(--color-text-muted);
font-size: 0.82rem;
line-height: 1.5;
display: block;
}
.usercp-toggle__label small a { color: var(--color-accent); }
.profil__like-row {
margin-top: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.profil__like-row .urbex-like {
font-size: 0.9rem;
padding: 0.5rem 0.9rem;
}
.profil__like-row .urbex-like i { font-size: 1em; }
.usercp-toggle-row--locked {
background: rgba(145, 70, 255, 0.04);
border-color: rgba(145, 70, 255, 0.2);
}
.usercp-toggle-row--locked .usercp-toggle {
cursor: default;
}
.usercp-toggle__lock-icon {
flex-shrink: 0;
width: 42px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
font-size: 0.9rem;
margin-top: 2px;
}
.usercp-toggle__badge {
display: inline-block;
background: var(--color-accent);
color: #1a1a1a;
font-size: 0.65rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 4px;
margin-left: 0.4rem;
letter-spacing: 0.5px;
vertical-align: middle;
text-transform: uppercase;
}
.urbexer-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.urbexer-stat-box {
padding: 1rem 1.2rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
text-align: center;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.urbexer-stat-box__value {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--color-accent);
line-height: 1;
}
.urbexer-stat-box__label {
font-size: 0.85rem;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.usercp-card {
padding: 1.2rem 1.4rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
margin-bottom: 1.5rem;
}
.usercp-section-title {
font-family: var(--font-display);
font-size: 1.1rem;
margin: 1rem 0 0.4rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.usercp-section-title i { color: var(--color-accent); }
.usercp-section-desc {
color: var(--color-text-muted);
font-size: 0.88rem;
margin: 0 0 1.2rem;
}
.usercp-socials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.usercp-info-card {
margin: 1.5rem 0;
padding: 0.9rem 1.2rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 0.9rem;
}
.usercp-info-card > i {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(145, 70, 255, 0.1);
color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.usercp-info-card strong {
display: block;
font-family: var(--font-display);
}
.usercp-info-card small {
display: block;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.usercp-info-card a { color: var(--color-accent); }
.urbex-card--banner {
display: block;
padding: 0;
overflow: hidden;
}
.urbex-card__banner {
position: relative;
width: 100%;
aspect-ratio: 4 / 1;
background: #1a1a1a center/cover no-repeat;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.urbex-card__banner--fallback {
background:
radial-gradient(ellipse at top right, rgba(145, 70, 255, 0.18), transparent 60%),
linear-gradient(135deg, #1f1f1f 0%, #181818 100%);
}
.urbex-card__views {
position: absolute;
top: 0.7rem;
right: 0.8rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
z-index: 2;
pointer-events: none;
}
.urbex-card__views i {
color: var(--color-accent);
font-size: 0.85em;
}
.urbex-card--banner .urbex-card__inner {
display: grid;
grid-template-columns: 48px 80px 1fr auto;
grid-template-rows: auto auto;
align-items: start;
column-gap: 1rem;
row-gap: 0.4rem;
padding: 1rem 1.2rem 1.1rem;
}
.urbex-card--banner .urbex-card__rank {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--color-accent);
text-align: center;
width: auto;
}
.urbex-card--banner .urbex-card__avatar {
grid-column: 2;
grid-row: 1 / span 2;
width: 80px;
height: 80px;
border-radius: var(--radius);
background: rgba(145, 70, 255, 0.08);
overflow: hidden;
align-self: center;
}
.urbex-card--banner .urbex-card__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.urbex-card--banner .urbex-card__body {
grid-column: 3;
grid-row: 1 / span 2;
min-width: 0;
}
.urbex-card--banner .urbex-card__name {
font-size: 1.15rem;
}
.urbex-card--banner .urbex-card__stats {
grid-column: 4;
grid-row: 1 / span 2;
align-self: center;
display: flex;
align-items: center;
min-width: 70px;
}
.urbex-card--banner .urbex-card__stats .urbex-stat,
.urbex-card--banner .urbex-card__stats .urbex-like {
width: 100%;
justify-content: center;
}
.urbex-card--banner .urbex-card__socials {
margin-top: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.urbex-card--banner .urbex-social {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
font-size: 0.95rem;
}
@media (max-width: 720px) {
.urbex-card--banner .urbex-card__inner {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-rows: auto auto auto;
column-gap: 0.7rem;
row-gap: 0.6rem;
padding: 0.9rem 1rem 1rem;
}
.urbex-card--banner .urbex-card__rank {
grid-column: 1;
grid-row: 1;
font-size: 1.05rem;
align-self: center;
}
.urbex-card--banner .urbex-card__avatar {
grid-column: 2;
grid-row: 1;
width: 56px; height: 56px;
}
.urbex-card--banner .urbex-card__body {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
}
.urbex-card--banner .urbex-card__bio {
font-size: 0.9rem;
-webkit-line-clamp: unset;
line-clamp: unset;
display: block;
overflow: visible;
text-overflow: clip;
-webkit-box-orient: unset;
line-height: 1.5;
margin-bottom: 0.7rem;
}
.urbex-card--banner .urbex-card__socials {
margin-top: 0.5rem;
gap: 0.45rem;
justify-content: flex-start;
}
.urbex-card--banner .urbex-card__stats {
grid-column: 1 / -1;
grid-row: 3;
flex-direction: row;
justify-content: flex-end;
padding-top: 0;
border-top: 0;
margin-top: 0;
min-width: 0;
}
.urbex-card--banner .urbex-card__stats .urbex-stat,
.urbex-card--banner .urbex-card__stats .urbex-like {
width: auto;
font-size: 0.88rem;
padding: 0.45rem 0.9rem;
}
.urbex-card--banner .urbex-card__stats .urbex-like i {
font-size: 0.95em;
}
}
@media (max-width: 720px) {
.urbex-card:not(.urbex-card--banner) {
grid-template-columns: auto auto 1fr;
grid-template-rows: auto auto auto;
column-gap: 0.7rem;
row-gap: 0.5rem;
}
.urbex-card:not(.urbex-card--banner) .urbex-card__rank {
grid-column: 1;
grid-row: 1;
align-self: center;
}
.urbex-card:not(.urbex-card--banner) .urbex-card__avatar {
grid-column: 2;
grid-row: 1;
}
.urbex-card:not(.urbex-card--banner) .urbex-card__body {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
}
.urbex-card:not(.urbex-card--banner) .urbex-card__bio {
-webkit-line-clamp: unset;
line-clamp: unset;
display: block;
overflow: visible;
text-overflow: clip;
-webkit-box-orient: unset;
}
.urbex-card:not(.urbex-card--banner) .urbex-card__stats {
grid-column: 1 / -1;
grid-row: 3;
padding-top: 0;
border-top: 0;
margin-top: 0;
justify-content: flex-end;
}
}
.banner-edit {
display: flex;
flex-direction: column;
gap: 1rem;
}
.banner-edit__preview {
width: 100%;
aspect-ratio: 4 / 1;
background: #1a1a1a center/cover no-repeat;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.banner-edit__preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner-edit__preview--empty {
background:
radial-gradient(ellipse at top right, rgba(145, 70, 255, 0.12), transparent 60%),
linear-gradient(135deg, #1f1f1f 0%, #181818 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--color-text-muted);
}
.banner-edit__preview--empty i {
font-size: 2rem;
color: rgba(255, 255, 255, 0.2);
}
.banner-edit__preview--empty span {
font-size: 0.85rem;
}
.banner-edit__actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#banner-cropper-modal .cropper-area {
width: 100%;
max-width: 100%;
max-height: 70vh;
}
#banner-cropper-modal .cropper-area img {
display: block;
max-width: 100%;
}
.urbex-card__medal {
position: absolute;
top: 0.7rem;
left: 0.9rem;
font-size: 1.6rem;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.urbex-card__medal--gold i { color: var(--color-accent); }
.urbex-card__medal--silver i { color: #BEBEBE; }
.urbex-card__medal--bronze i { color: #CD5C3A; }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 2.5rem;
padding: 0 1rem;
}
.section-head__eyebrow {
display: inline-block;
color: var(--color-accent);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.7rem;
}
.section-head__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 5.5vw, 2rem);
margin: 0 0 0.6rem;
line-height: 1.2;
}
.section-head__lead {
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.section-head--left {
text-align: left;
margin-left: 0;
margin-right: 0;
padding: 0;
max-width: 100%;
}
.home-about__pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
max-width: 760px;
margin: 0 auto 2.5rem;
}
.home-about__pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-size: 0.9rem;
font-weight: 500;
}
.home-about__pill i {
color: var(--color-accent);
font-size: 0.95em;
}
.home-about__text {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.home-about__text p {
color: var(--color-text-muted);
line-height: 1.7;
margin: 0 0 1rem;
font-size: 1rem;
}
.home-about__text p:last-child { margin-bottom: 0; }
.home-about__text p strong { color: var(--color-text); }
@media (max-width: 720px) {
.home-about__pills { margin-bottom: 1.6rem; }
.home-about__pill { font-size: 0.82rem; padding: 0.4rem 0.8rem; }
}
.home-latest__carousel {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
padding: 0.5rem 0;
}
.home-latest__track {
display: flex;
gap: 1.5rem;
width: max-content;
animation: home-latest-scroll 40s linear infinite;
}
/* Bei wenigen Karten: Animation aus, mittig zentrieren */
.home-latest__track--static {
animation: none;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.home-latest__carousel:hover .home-latest__track {
animation-play-state: paused;
}
.home-latest__track .home-place-card {
flex: 0 0 280px;
margin: 0;
}
@keyframes home-latest-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.home-latest__track { animation: none; }
}
.contact-info-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.4rem 1.6rem;
}
.contact-info-card__eyebrow {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1rem;
}
.contact-info-card__list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-info-card__list li {
display: flex;
align-items: flex-start;
gap: .75rem;
font-size: 0.88rem;
}
.contact-info-card__list li > i {
color: var(--color-accent);
width: 1.1em;
text-align: center;
flex-shrink: 0;
margin-top: 2px;
font-size: 0.95rem;
}
.contact-info-card__list li > div {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
}
.contact-info-card__list strong {
color: var(--color-text);
font-weight: 600;
font-size: 0.88rem;
}
.contact-info-card__list a,
.contact-info-card__list span {
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.85rem;
word-break: break-word;
}
.contact-info-card__list a:hover { color: var(--color-accent); }
.contact-form { margin-top: 1rem; }
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.contact-form__row { grid-template-columns: 1fr; }
}
.contact-form__hp {
position: absolute !important;
left: -10000px;
top: auto;
width: 1px; height: 1px;
overflow: hidden;
}
.field-modern--textarea .field-modern__row { display: block; }
.field-modern__row--textarea .field-modern__icon {
top: 1.1rem;
transform: none;
}
.field-modern__row--textarea textarea {
width: 100%;
padding: .95rem 1rem .95rem 2.7rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
min-height: 180px;
resize: vertical;
transition: border-color .15s ease, background .15s ease;
}
.field-modern__row--textarea textarea::placeholder { color: var(--color-text-dim); }
.field-modern__row--textarea textarea:hover { border-color: var(--color-border-light); }
.field-modern__row--textarea textarea:focus {
outline: none;
border-color: var(--color-accent);
background: #2a2a2a;
}
.field-modern__row--textarea:focus-within .field-modern__icon { color: var(--color-accent); }
.field-modern__error {
margin: .45rem 0 0;
font-size: 0.82rem;
color: #fca5a5;
display: flex;
align-items: center;
gap: .4rem;
line-height: 1.4;
}
.field-modern__error i { font-size: 0.9rem; }
.contact-form__check {
display: flex;
align-items: flex-start;
gap: .65rem;
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.5;
cursor: pointer;
padding: .25rem 0;
}
.contact-form__check input[type="checkbox"] {
width: 1.05rem;
height: 1.05rem;
margin: 0;
margin-top: 2px;
accent-color: var(--color-accent);
flex-shrink: 0;
cursor: pointer;
}
.contact-form__check a {
color: var(--color-accent);
text-decoration: none;
}
.contact-form__check a:hover { text-decoration: underline; }
.contact-form__hint {
margin: .5rem 0 0;
font-size: 0.82rem;
color: var(--color-text-dim);
line-height: 1.5;
}
.text-page--narrow {
max-width: 880px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.faq-cta {
margin-top: 3rem;
text-align: center;
padding: 2rem 1.5rem;
background: rgba(145, 70, 255, 0.04);
border: 1px solid rgba(145, 70, 255, 0.18);
border-radius: var(--radius-lg);
}
.faq-cta p {
margin: 0 0 1rem;
color: var(--color-text-muted);
font-size: 1rem;
}
.home-faq-teaser {
padding: 3.5rem 1.5rem;
background: rgba(255, 255, 255, 0.02);
}
.home-faq-teaser__inner {
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem 2.2rem;
}
.home-faq-teaser__text .section-head__eyebrow {
margin-bottom: .5rem;
}
.home-faq-teaser__text h2 {
font-family: var(--font-display);
font-size: 1.75rem;
margin: 0 0 .6rem;
line-height: 1.2;
}
.home-faq-teaser__text p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 560px;
}
.home-faq-teaser__cta {
display: flex;
flex-direction: column;
gap: .65rem;
flex-shrink: 0;
}
.home-faq-teaser__cta .btn { white-space: nowrap; }
@media (max-width: 760px) {
.home-faq-teaser__inner {
grid-template-columns: 1fr;
padding: 1.6rem 1.4rem;
}
.home-faq-teaser__cta {
flex-direction: column;
align-items: stretch;
}
.home-faq-teaser__cta .btn {
width: 100%;
justify-content: center;
}
}
.faq-groups {
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-top: 1rem;
}
.faq-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.faq-group__title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 .5rem;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text);
padding-bottom: .75rem;
border-bottom: 1px solid var(--color-border);
}
.faq-group__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: var(--radius-sm);
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
font-size: 1.05rem;
flex-shrink: 0;
}
.faq-group__items {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
@media (max-width: 600px) {
.faq-group__title {
font-size: 1.1rem;
gap: 0.6rem;
}
.faq-group__icon {
width: 2.1rem;
height: 2.1rem;
font-size: 0.95rem;
}
}
.admin-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem 1.6rem;
}
.admin-card__head {
margin: 0 0 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.admin-card__head h2,
.admin-card__head h3 {
margin: 0 0 .3rem;
font-family: var(--font-display);
}
.admin-card__head p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.admin-table--compact th,
.admin-table--compact td {
padding: .55rem .8rem;
font-size: 0.86rem;
}
.visitor-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
.visitor-kpi {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1rem 1.2rem;
}
.visitor-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
background: rgba(145, 70, 255, 0.10);
color: var(--color-accent);
font-size: 1.05rem;
flex-shrink: 0;
}
.visitor-kpi strong {
display: block;
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--color-text);
line-height: 1.1;
}
.visitor-kpi span {
color: var(--color-text-muted);
font-size: 0.85rem;
}
.visitor-kpi--online .visitor-kpi__icon {
background: rgba(78, 192, 122, 0.12);
color: #4ec07a;
position: relative;
}
.visitor-kpi--online .visitor-kpi__icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: #4ec07a;
opacity: 0.4;
animation: visitor-pulse 1.8s ease-out infinite;
}
.visitor-kpi--online strong { color: #4ec07a; }
@keyframes visitor-pulse {
0% { transform: scale(0.9); opacity: 0.4; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.visitor-kpi--online .visitor-kpi__icon::after { animation: none; opacity: 0; }
}
.online-dot {
display: inline-block;
width: .55rem;
height: .55rem;
border-radius: 50%;
background: #4ec07a;
box-shadow: 0 0 0 0 #4ec07a;
margin-right: .4rem;
vertical-align: middle;
animation: online-dot-pulse 1.8s ease-out infinite;
}
@keyframes online-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(78,192,122,0.6); }
70% { box-shadow: 0 0 0 8px rgba(78,192,122,0); }
100% { box-shadow: 0 0 0 0 rgba(78,192,122,0); }
}
.visitor-filter {
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
}
.visitor-filter__search {
position: relative;
flex: 1 1 280px;
min-width: 240px;
}
.visitor-filter__search i {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
color: var(--color-text-dim);
pointer-events: none;
}
.visitor-filter__search input {
width: 100%;
padding: .65rem 1rem .65rem 2.5rem;
background: var(--color-bg-input);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.92rem;
}
.visitor-filter__search input:focus {
outline: none;
border-color: var(--color-accent);
background: #2a2a2a;
}
.visitor-filter__tabs {
display: inline-flex;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: .25rem;
gap: .15rem;
}
.visitor-filter__tab {
padding: .45rem .85rem;
font-size: 0.85rem;
color: var(--color-text-muted);
text-decoration: none;
border-radius: 4px;
transition: background .15s ease, color .15s ease;
}
.visitor-filter__tab:hover { color: var(--color-text); background: rgba(255,255,255,0.04); }
.visitor-filter__tab.is-active {
background: var(--color-accent);
color: #1a1a1a;
font-weight: 600;
}
.visitor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem 1.5rem;
}
.visitor-grid__item {
display: flex;
flex-direction: column;
gap: .25rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--color-border);
}
.visitor-grid__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-dim);
}
.visitor-grid__item strong {
color: var(--color-text);
font-weight: 600;
font-size: 0.95rem;
word-break: break-word;
}
.liste-hint--info {
background: rgba(77, 143, 255, 0.07);
border-color: rgba(77, 143, 255, 0.25);
}
.liste-hint--info i { color: #6e9fe5; }
.liste-pageinfo {
margin: 0 0 1rem;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.liste-pageinfo strong { color: var(--color-text); }
.liste-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 2.5rem 0 1rem;
flex-wrap: wrap;
}
.liste-pager__btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .6rem 1.1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.liste-pager__btn:hover {
border-color: var(--color-accent);
background: rgba(145, 70, 255, 0.06);
color: var(--color-accent);
}
.liste-pager__btn.is-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.liste-pager__pages {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: .25rem;
flex-wrap: wrap;
}
.liste-pager__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 2.4rem;
padding: 0 .65rem;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: background .15s ease, color .15s ease;
}
.liste-pager__page:hover {
background: rgba(255,255,255,0.04);
color: var(--color-text);
}
.liste-pager__page.is-current {
background: var(--color-accent);
color: #1a1a1a;
}
.liste-pager__ellipsis {
color: var(--color-text-dim);
padding: 0 .35rem;
line-height: 2.4rem;
}
@media (max-width: 540px) {
.liste-pager { gap: .5rem; }
.liste-pager__btn { padding: .5rem .85rem; font-size: 0.85rem; }
.liste-pager__page { min-width: 2rem; height: 2rem; font-size: 0.85rem; }
}
a.liste-search__clear {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.form-row--checks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.check-tile {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.check-tile input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.check-tile i {
font-size: 1.5rem;
color: var(--color-text-dim);
width: 2.2rem;
text-align: center;
flex-shrink: 0;
transition: color .15s ease;
}
.check-tile__body { min-width: 0; }
.check-tile__body strong {
display: block;
color: var(--color-text);
font-size: 0.95rem;
}
.check-tile__body small {
display: block;
color: var(--color-text-muted);
font-size: 0.8rem;
margin-top: .15rem;
}
.check-tile:hover {
border-color: rgba(145, 70, 255, 0.4);
}
.check-tile.is-on {
border-color: var(--color-accent);
background: rgba(145, 70, 255, 0.08);
}
.check-tile.is-on i { color: var(--color-accent); }
@media (max-width: 540px) {
.form-row--checks { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.liste-page { padding: 1.2rem 0.8rem 3rem; }
.liste-title { font-size: 1.35rem; }
.liste-sub { font-size: 0.85rem; }
.liste-header { gap: 0.6rem; margin-bottom: 1rem; }
.liste-tools { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.liste-search { min-width: 0; width: 100%; }
.liste-sort {
width: 100%;
justify-content: space-between;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
padding: 0.4rem 0.7rem;
}
.liste-sort__select { flex: 1; }
.liste-hint { padding: 0.6rem 0.8rem; font-size: 0.85rem; }
.liste-item__link { padding: 0.7rem 0.8rem; gap: 0.7rem; }
.liste-item__cover { width: 84px; height: 60px; }
.liste-item__title { font-size: 0.95rem; margin-bottom: 0.3rem; }
.liste-item__meta {
font-size: 0.76rem;
gap: 0.55rem;
line-height: 1.4;
}
.liste-item__meta i { font-size: 0.78em; margin-right: 0.18rem; }
}
@media (max-width: 420px) {
.liste-page { padding: 1rem 0.6rem 2.5rem; }
.liste-title { font-size: 1.2rem; }
.liste-item__link { padding: 0.6rem 0.7rem; gap: 0.6rem; }
.liste-item__cover { width: 68px; height: 50px; }
.liste-item__title { font-size: 0.9rem; }
.liste-item__meta { font-size: 0.72rem; gap: 0.4rem; }
}
@media (max-width: 720px) {
.urbex-directory { padding: 1.2rem 0.8rem 3rem; }
.urbex-directory__head { margin-bottom: 1.5rem; }
.urbex-directory__head h1 { font-size: 1.55rem; margin: 0.3rem 0 0.6rem; }
.urbex-directory__head p { font-size: 0.9rem; margin-bottom: 1rem; }
.urbex-card { padding: 0.8rem 0.9rem; gap: 0.7rem; }
.urbex-card__rank { font-size: 0.9rem; width: 24px; }
.urbex-card__avatar { width: 52px; height: 52px; }
.urbex-card__avatar-initial { font-size: 1rem; }
.urbex-card__name { font-size: 1rem; }
.urbex-card__bio { font-size: 0.85rem; -webkit-line-clamp: 4; line-height: 1.45; margin-bottom: 0.4rem; }
.urbex-card__stats {
gap: 0.5rem;
padding-top: 0.5rem;
margin-top: 0.2rem;
}
.urbex-stat, .urbex-like {
font-size: 0.78rem;
padding: 0.3rem 0.55rem;
}
.urbex-social { width: 28px; height: 28px; font-size: 0.78rem; border-radius: 5px; }
.urbex-card__socials { gap: 0.3rem; }
}
@media (max-width: 420px) {
.urbex-directory { padding: 1rem 0.6rem 2.5rem; }
.urbex-directory__head h1 { font-size: 1.3rem; }
.urbex-directory__head p { font-size: 0.85rem; }
.urbex-card { padding: 0.7rem 0.75rem; gap: 0.55rem; }
.urbex-card__rank { font-size: 0.82rem; width: 22px; }
.urbex-card__avatar { width: 46px; height: 46px; }
.urbex-card__name { font-size: 0.95rem; }
.urbex-card__bio { font-size: 0.82rem; -webkit-line-clamp: 4; line-height: 1.45; }
.urbex-card__stats { gap: 0.35rem; }
.urbex-stat, .urbex-like { font-size: 0.74rem; padding: 0.25rem 0.45rem; gap: 0.25rem; }
.urbex-social { width: 26px; height: 26px; font-size: 0.72rem; }
}
@media (max-width: 420px) {
.urbex-card--banner .urbex-card__inner {
column-gap: 0.55rem;
row-gap: 0.55rem;
padding: 0.8rem 0.75rem 0.9rem;
}
.urbex-card--banner .urbex-card__rank { font-size: 0.95rem; }
.urbex-card--banner .urbex-card__avatar { width: 52px; height: 52px; }
.urbex-card--banner .urbex-card__name { font-size: 0.98rem; }
.urbex-card__views { font-size: 0.74rem; padding: 0.25rem 0.5rem; top: 0.5rem; right: 0.5rem; }
.urbex-card--banner .urbex-social { width: 30px; height: 30px; font-size: 0.82rem; }
.urbex-card--banner .urbex-card__bio { font-size: 0.86rem; }
}
@media (max-width: 1200px) {
.usermenu__premium .usermenu__premium-label { display: none; }
.usermenu__premium { padding: .5rem .7rem; }
.usermenu__premium i { margin: 0; font-size: 1rem; }
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-border-light) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--color-border-light);
border-radius: 4px;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
/* =====================================================================
ADMIN: Statistik-Seite – Charts + KPI-Grid
===================================================================== */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.admin-stats-grid .admin-card {
padding: 1.1rem 1.25rem;
}
.admin-card__label {
font-size: 0.78rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: .35rem;
font-weight: 600;
}
.admin-card__value {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: .25rem;
}
.admin-card__sub {
font-size: 0.78rem;
color: var(--color-text-muted);
}
.admin-charts-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.admin-chart-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.25rem 1.4rem;
display: flex;
flex-direction: column;
min-width: 0;
}
.admin-chart-card--wide {
grid-column: span 2;
}
.admin-chart-card > header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--color-border);
}
.admin-chart-card > header h3 {
margin: 0;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
}
.admin-chart-card__sum {
font-size: 0.8rem;
color: var(--color-text-muted);
white-space: nowrap;
}
.admin-chart-card__canvas {
flex: 1;
position: relative;
height: 260px;
min-height: 220px;
}
.admin-chart-card .admin-table {
margin: 0;
}
.admin-toplists-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
@media (max-width: 900px) {
.admin-charts-grid,
.admin-toplists-grid {
grid-template-columns: 1fr;
}
.admin-chart-card--wide {
grid-column: span 1;
}
}
/* =====================================================================
ADMIN: Edit-Formulare (Places + Overnight)
===================================================================== */
.admin-edit-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.5rem;
}
.admin-edit-col {
min-width: 0;
}
.admin-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: .75rem;
}
.admin-image-tile {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
border: 2px solid var(--color-border);
background: var(--color-bg);
}
.admin-image-tile.is-cover {
border-color: var(--color-accent);
}
.admin-image-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-image-tile__actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
gap: .25rem;
padding: .35rem;
background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
opacity: 0;
transition: opacity .15s;
}
.admin-image-tile:hover .admin-image-tile__actions,
.admin-image-tile.is-cover .admin-image-tile__actions {
opacity: 1;
}
.admin-image-tile__cover-badge {
flex: 1;
text-align: center;
background: var(--color-accent);
color: #1a1a1a;
font-size: 0.72rem;
font-weight: 700;
padding: .35rem .5rem;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 900px) {
.admin-edit-grid {
grid-template-columns: 1fr;
}
}
/* =====================================================================
ADMIN: Form-Felder (im Edit-Form)
===================================================================== */
.admin-edit-form .field-modern {
margin-bottom: 1rem;
}
.admin-edit-form .field-modern > label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: .4rem;
}
.admin-edit-form .field-modern input[type="text"],
.admin-edit-form .field-modern input[type="number"],
.admin-edit-form .field-modern input[type="email"],
.admin-edit-form .field-modern input[type="url"],
.admin-edit-form .field-modern input[type="password"],
.admin-edit-form .field-modern input[type="search"],
.admin-edit-form .field-modern input[type="tel"],
.admin-edit-form .field-modern input[type="date"],
.admin-edit-form .field-modern input[type="time"],
.admin-edit-form .field-modern input[type="datetime-local"],
.admin-edit-form .field-modern textarea,
.admin-edit-form .field-modern select {
width: 100%;
padding: .65rem .85rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.92rem;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.admin-edit-form .field-modern input[type="text"]:focus,
.admin-edit-form .field-modern input[type="number"]:focus,
.admin-edit-form .field-modern input[type="email"]:focus,
.admin-edit-form .field-modern input[type="url"]:focus,
.admin-edit-form .field-modern input[type="password"]:focus,
.admin-edit-form .field-modern input[type="search"]:focus,
.admin-edit-form .field-modern input[type="tel"]:focus,
.admin-edit-form .field-modern input[type="date"]:focus,
.admin-edit-form .field-modern input[type="time"]:focus,
.admin-edit-form .field-modern input[type="datetime-local"]:focus,
.admin-edit-form .field-modern textarea:focus,
.admin-edit-form .field-modern select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.15);
}
/* Dark-Theme für native Datums-Picker (sonst weißer Hintergrund) */
.admin-edit-form .field-modern input[type="datetime-local"],
.admin-edit-form .field-modern input[type="date"],
.admin-edit-form .field-modern input[type="time"] {
color-scheme: dark;
}
.admin-edit-form .field-modern textarea {
resize: vertical;
min-height: 100px;
font-family: var(--font-body);
line-height: 1.5;
}
.admin-edit-form .field-modern select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .5rem center;
background-size: 1.25rem;
padding-right: 2rem;
}
.admin-edit-form .field-modern.has-error input,
.admin-edit-form .field-modern.has-error textarea,
.admin-edit-form .field-modern.has-error select {
border-color: var(--color-danger);
}
.admin-edit-form .field-modern__error {
display: block;
margin-top: .3rem;
color: var(--color-danger);
font-size: 0.8rem;
}
/* Checkbox-Label im Admin */
.admin-edit-form label > input[type="checkbox"] {
width: auto;
accent-color: var(--color-accent);
margin-right: .35rem;
transform: translateY(1px);
}
/* form-row für nebeneinander stehende Felder */
.admin-edit-form .form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.admin-edit-form .form-row > .field-modern {
flex: 1 1 200px;
min-width: 0;
}
/* Karten-Picker */
.admin-edit-form .picker-map {
width: 100%;
height: 300px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-bg);
}
/* =====================================================================
ADMIN: Headings (h1, h2, h3) im Content-Bereich
===================================================================== */
.admin-main h1 {
font-family: var(--font-display);
font-size: 1.6rem;
line-height: 1.2;
margin: 0 0 .35rem 0;
letter-spacing: 0.01em;
}
.admin-main > h1:first-child,
.admin-head h1,
.admin-edit-form ~ h1 {
margin-top: 0;
}
.admin-main h2 {
font-family: var(--font-display);
font-size: 1.2rem;
line-height: 1.3;
margin: 1.5rem 0 .75rem;
letter-spacing: 0.01em;
}
.admin-main h3 {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
margin: 1rem 0 .5rem;
}
.admin-main .admin-card__head h2,
.admin-main .admin-card__head h3 {
margin-top: 0;
}
.admin-head {
margin-bottom: 1.5rem;
}
.admin-head p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.92rem;
}
/* =====================================================================
KARTE: Zentriertes Place-Modal (statt Leaflet-Popup)
===================================================================== */
.place-modal-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity .2s;
}
.place-modal-overlay.is-open {
opacity: 1;
}
.place-modal {
position: relative;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
width: 100%;
max-width: 380px;
max-height: calc(100vh - 2rem);
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
transform: translateY(20px);
transition: transform .2s;
}
.place-modal-overlay.is-open .place-modal {
transform: translateY(0);
}
.place-modal__close {
position: absolute;
top: .5rem;
right: .5rem;
z-index: 2;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(0,0,0,0.6);
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.place-modal__close:hover {
background: rgba(0,0,0,0.85);
}
.place-modal .map-popup__cover {
height: 180px;
background-size: cover;
background-position: center;
background-color: var(--color-bg);
}
.place-modal .map-popup__body {
padding: 1rem 1.25rem 1.25rem;
}
.place-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
margin-bottom: .5rem;
}
.place-modal .map-popup__title {
font-family: var(--font-display);
font-size: 1.2rem;
line-height: 1.2;
margin: 0;
flex: 1;
}
.place-modal__fav {
background: rgba(145, 70, 255, 0.08);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
transition: all .15s;
}
.place-modal__fav:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: rgba(145, 70, 255, 0.18);
}
.place-modal__fav.is-active {
border-color: #e54b4b;
color: #e54b4b;
background: rgba(229, 75, 75, 0.12);
}
.place-modal__fav.shake {
animation: shake 0.4s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* =====================================================================
NEWS – frontseitig (Startseite-Sektion, Übersicht /news, Detail)
=====================================================================
Design-Prinzip: spiegelt bewusst .home-place-card, .liste-page und
.place-detail. Keine eigenen Schriften, keine eigenen Radien.
Token-Quelle: --radius (10px), --radius-sm (6px) – wie überall.
===================================================================== */
/* --- Startseite: News-Sektion --------------------------------------- */
.home-news {
padding: 3rem 0 2rem;
}
.home-news__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
}
.home-news .section-head {
margin-bottom: 1.5rem;
}
.home-news__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 1.75rem;
}
.home-news__grid--count-1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.home-news__grid--count-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
.home-news__grid,
.home-news__grid--count-1,
.home-news__grid--count-2 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.home-news__grid--count-3 { grid-template-columns: repeat(2, 1fr); }
.home-news__grid--count-3 > :nth-child(3) {
grid-column: 1 / -1; max-width: 600px; justify-self: center; width: 100%;
}
}
.home-news__foot {
display: flex;
justify-content: center;
}
/* --- Übersicht /news : nutzt .liste-page-Pattern, nur das Grid ist eigen --- */
.news-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-empty {
text-align: center;
padding: 3rem 1.5rem;
color: var(--color-text-muted);
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
}
.news-empty i {
font-size: 2.2rem;
color: var(--color-accent);
opacity: 0.5;
display: block;
margin-bottom: 0.6rem;
}
.news-empty p { margin: 0; }
/* --- News-Card (identisch zum home-place-card Look) ----------------- */
.news-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
overflow: hidden;
transition: transform .15s ease, border-color .15s ease;
}
.news-card:hover {
transform: translateY(-2px);
border-color: rgba(145, 70, 255, 0.3);
}
.news-card__link {
display: block;
text-decoration: none;
color: var(--color-text);
}
.news-card__cover {
aspect-ratio: 4 / 1;
background: #1a1a1a center/cover no-repeat;
}
.news-card__body {
padding: 0.9rem 1rem;
}
.news-card__title {
margin: 0 0 0.45rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--color-text);
}
.news-card__excerpt {
margin: 0 0 0.6rem;
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: var(--color-text-dim);
padding-top: 0.55rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.news-card__date {
display: inline-flex; align-items: center; gap: 0.35rem;
}
.news-card__date i { color: var(--color-accent); }
.news-card__stats {
display: inline-flex; align-items: center; gap: 0.7rem;
}
.news-card__stats i { margin-right: 0.2rem; opacity: 0.7; }
/* =====================================================================
NEWS-DETAIL – Magazin-Layout
=====================================================================
Eine Lese-Spalte (~920px) – Header und Body sind gleich breit.
Das Cover-Bild floatet links im Content, Text läuft drumherum.
Auf Mobile bricht das Bild oben über die volle Breite.
===================================================================== */
.news-detail {
padding-bottom: 4rem;
}
.news-detail__head,
.news-detail__body {
max-width: 920px;
margin: 0 auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.news-detail__draft-banner {
max-width: 920px;
margin: 1.25rem auto 0;
background: rgba(145, 70, 255, 0.1);
border: 1px solid rgba(145, 70, 255, 0.3);
color: var(--color-accent);
padding: 0.7rem 0.9rem;
border-radius: var(--radius-sm);
font-size: 0.88rem;
}
/* Header-Block – aus .place-detail__head abgeleitet */
.news-detail__head {
padding: 2rem 0 1.5rem;
}
.news-detail__back {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: .88rem;
margin-bottom: 1rem;
transition: color .15s ease;
}
.news-detail__back:hover { color: var(--color-accent); }
.news-detail__head-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: .7rem;
}
.news-detail__pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .65rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border-radius: 999px;
font-size: .8rem;
}
.news-detail__pill i { color: var(--color-accent); font-size: .8rem; }
.news-detail__pill--date {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
color: var(--color-accent);
}
.news-detail__title {
margin: 0 0 .3rem;
font-family: var(--font-body);
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(1.6rem, 4vw, 2.4rem);
line-height: 1.15;
color: #fff;
}
.news-detail__loc {
color: var(--color-text-muted);
margin: 0.45rem 0 0;
font-size: 0.98rem;
line-height: 1.5;
}
/* Body: einfache Lese-Spalte, normale Block-Flows */
.news-detail__body {
/* Padding kommt schon vom .news-detail__body Container oben */
}
/* Cover-Banner: 4:1 Format oben über die volle Lese-Spalte */
.news-detail__cover {
aspect-ratio: 4 / 1;
margin: 0 0 1.5rem;
border-radius: var(--radius);
overflow: hidden;
background: #1a1a1a;
border: 1px solid var(--color-border);
}
.news-detail__cover img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Auf wirklich schmalen Screens das Banner-Verhältnis etwas weicher
machen (3:1) damit's nicht zur Streichholzschachtel wird. */
@media (max-width: 540px) {
.news-detail__cover { aspect-ratio: 3 / 1; }
}
/* Content-Typografie */
.news-detail__content {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
}
.news-detail__content p { margin: 0 0 1rem; }
.news-detail__content h2 {
font-family: var(--font-body);
font-weight: 800;
font-size: 1.4rem;
margin: 1.8rem 0 0.7rem;
color: #fff;
letter-spacing: -0.01em;
}
.news-detail__content h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.15rem;
margin: 1.4rem 0 0.5rem;
color: #fff;
}
.news-detail__content h4 { font-size: 1.02rem; margin: 1.2rem 0 0.4rem; font-weight: 700; }
.news-detail__content ul,
.news-detail__content ol { margin: 0 0 1rem 1.3rem; padding: 0; }
.news-detail__content li { margin-bottom: 0.35rem; }
.news-detail__content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.news-detail__content a:hover { color: var(--color-accent-hover); }
.news-detail__content strong { font-weight: 700; color: #fff; }
.news-detail__content blockquote {
margin: 1.25rem 0;
padding: 0.7rem 1rem;
background: rgba(145, 70, 255, 0.05);
border-left: 3px solid var(--color-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--color-text-muted);
font-style: italic;
}
.news-detail__content hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: 1.75rem 0;
}
/* === Action-Bar (Like + Share) === */
.news-detail__actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
padding: 1rem 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Like-Button – matched 1:1 das .urbex-like-Pattern (--radius-sm,
rotes "is-liked"). Etwas größeres Padding, da hier auf Detail-Page. */
.news-like-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font: inherit;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.news-like-btn:hover:not(:disabled) {
background: rgba(255, 107, 107, 0.08);
border-color: rgba(255, 107, 107, 0.3);
color: #ff6b6b;
}
.news-like-btn.is-liked {
background: rgba(255, 107, 107, 0.12);
border-color: rgba(255, 107, 107, 0.4);
color: #ff6b6b;
}
.news-like-btn.is-liked i { animation: news-heart-pop .35s ease; }
@keyframes news-heart-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.news-like-btn__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.news-like-btn__label { font-size: 0.85rem; }
.news-detail__share { display: inline-flex; }
/* =====================================================================
NEWS-Kommentare – spiegelt .comment-form / .comment-list von Places
===================================================================== */
.news-comments {
margin-top: 2rem;
}
.news-comments__head {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.15rem;
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-text);
}
.news-comments__head i { color: var(--color-accent); }
.news-comments__form {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 1.25rem;
}
.news-comments__form textarea {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
padding: 0.65rem 0.85rem;
font: inherit;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
}
.news-comments__form textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.news-comments__form-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 0.7rem;
flex-wrap: wrap;
color: var(--color-text-dim);
font-size: 0.8rem;
}
.news-comments__hint strong { color: var(--color-accent); font-weight: 600; }
.news-comments__error {
margin: 0.5rem 0 0;
font-size: 0.83rem;
color: var(--color-danger);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.news-comments__login-hint {
background: rgba(145, 70, 255, 0.06);
border: 1px solid rgba(145, 70, 255, 0.2);
color: var(--color-text-muted);
padding: 0.75rem 0.9rem;
border-radius: var(--radius-sm);
margin-bottom: 1.25rem;
text-align: center;
font-size: 0.9rem;
}
.news-comments__login-hint i { color: var(--color-accent); margin-right: 0.35rem; }
.news-comments__login-hint a { color: var(--color-accent); font-weight: 600; text-decoration: underline; }
.news-comments__empty {
text-align: center;
color: var(--color-text-dim);
padding: 1.25rem;
background: rgba(255, 255, 255, 0.015);
border-radius: var(--radius-sm);
border: 1px dashed var(--color-border);
font-size: 0.92rem;
}
.news-comments__list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.news-comment {
display: flex;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.news-comment.is-hidden { opacity: 0.55; border-style: dashed; }
.news-comment__avatar { flex: 0 0 auto; }
.news-comment__body { flex: 1; min-width: 0; }
.news-comment__head {
display: flex;
align-items: baseline;
gap: 0.55rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.news-comment__head strong { color: var(--color-text); font-size: 0.92rem; }
.news-comment__date { font-size: 0.78rem; color: var(--color-text-dim); }
.news-comment__flag {
font-size: 0.72rem;
color: var(--color-danger);
background: rgba(229, 75, 75, 0.1);
border: 1px solid rgba(229, 75, 75, 0.3);
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.news-comment__text {
margin: 0;
color: var(--color-text-muted);
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 0.92rem;
}
.news-comment__admin { margin-top: 0.55rem; }
.news-comment__admin-btn {
background: none;
border: 1px solid var(--color-border-light);
color: var(--color-text-dim);
font-size: 0.78rem;
padding: 0.3rem 0.65rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .15s ease;
}
.news-comment__admin-btn:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* =====================================================================
ADMIN-NEWS – Listenseite + Editor (admincp/news.php, news-edit.php)
=====================================================================
Diese Sektion benutzt das vorhandene Vokabular: .admin-card, .admin-card__head,
.field-modern, .admin-tabs, .admin-table. Hier kommen nur die ergänzenden
news-spezifischen Layout-Klassen dazu.
===================================================================== */
/* --- Übersicht: Top-Bar (Tabs + "Neue News"-Button) ----------------- */
.news-list-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.news-list-bar .admin-tabs { margin: 0; flex: 1; min-width: 0; }
/* Thumbnail in der News-Tabelle (Cover-Vorschau pro Zeile) */
.news-list-thumb {
width: 90px;
aspect-ratio: 4 / 1;
background: #1a1a1a center/cover no-repeat;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
/* --- Editor: Aktionsleiste oben ------------------------------------- */
.news-edit-bar {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.news-edit-bar__status {
margin-left: auto;
font-size: 0.85rem;
color: var(--color-text-dim);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* --- Editor: 2-Spalten-Grid (Main + Sidebar) ------------------------ */
.news-editor-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 1.25rem;
align-items: flex-start;
}
@media (max-width: 1000px) {
.news-editor-grid { grid-template-columns: 1fr; }
}
.news-editor-grid__main,
.news-editor-grid__side {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.news-editor-grid__side .admin-card { padding: 1.1rem 1.2rem; }
/* "Block"-Buttons im Editor-Sidebar */
.news-edit-buttons {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* Cover-Vorschau im Editor */
.news-edit-cover-preview {
aspect-ratio: 16/10;
background: #1a1a1a center/cover no-repeat;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}
.news-edit-cover-preview--banner {
aspect-ratio: 4 / 1;
}
.news-edit-cover-preview img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Stats-Liste im Editor-Sidebar */
.news-edit-stats {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.news-edit-stats i {
color: var(--color-accent);
margin-right: 0.45rem;
width: 1.1em;
text-align: center;
}
/* Checkbox-Variante von .field-modern (für „Cover entfernen") */
.field-modern--check {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.55rem;
margin-bottom: 1rem;
cursor: pointer;
user-select: none;
}
.field-modern--check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color-accent);
cursor: pointer;
margin: 0;
}
.field-modern--check span {
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* --- Status-Pills (im Editor + Listen-Tabelle) ---------------------- */
.status-pill {
display: inline-block;
padding: 0.18rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
vertical-align: middle;
}
.status-pill--published {
background: rgba(78, 192, 122, 0.12);
color: #6fd693;
border: 1px solid rgba(78, 192, 122, 0.3);
}
.status-pill--draft {
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
border: 1px solid rgba(145, 70, 255, 0.3);
}
.status-pill--hidden {
background: rgba(229, 75, 75, 0.12);
color: #f08383;
border: 1px solid rgba(229, 75, 75, 0.3);
}
/* Accessibility-Helper */
.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;
}
/* =====================================================================
NEWS-EDITOR – Quill WYSIWYG-Overrides + Datei-Input + Checkbox
=====================================================================
Quill bringt sein "Snow"-Theme mit weißem BG mit. Wir ziehen es ans
dunkle Theme dieser Seite ran. Die .ql-*-Klassen sind Quill-Output,
wir überschreiben nur was nötig ist.
===================================================================== */
/* Editor-Field-Spacing */
.field-modern--editor { margin-top: 0.25rem; }
/* === Quill Toolbar === */
.ql-toolbar.ql-snow {
background: var(--color-bg);
border: 1px solid var(--color-border) !important;
border-bottom: none !important;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: 0.5rem 0.6rem !important;
}
.ql-toolbar.ql-snow .ql-formats {
margin-right: 0.7rem !important;
}
/* Header-Picker: damit "Normaler Text" / "Überschrift groß" nicht
auf zwei Zeilen umbrechen, kriegt der Picker genug Breite + nowrap. */
.ql-snow .ql-picker.ql-header {
width: auto !important;
min-width: 130px;
}
.ql-snow .ql-picker-label {
white-space: nowrap;
display: inline-flex !important;
align-items: center;
padding: 0 1.6rem 0 0.55rem !important;
}
.ql-snow .ql-picker-label::before {
line-height: 1.4 !important;
}
.ql-snow .ql-picker-item {
white-space: nowrap;
padding: 0.35rem 0.7rem !important;
}
/* Toolbar-Buttons: dunkle Icons -> hellgrau machen */
.ql-snow .ql-stroke { stroke: var(--color-text-muted) !important; }
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill { fill: var(--color-text-muted) !important; }
.ql-snow .ql-picker { color: var(--color-text-muted) !important; }
.ql-snow .ql-picker-options { background: var(--color-bg-card) !important; border-color: var(--color-border) !important; }
.ql-snow .ql-picker-options .ql-picker-item { color: var(--color-text) !important; }
.ql-snow .ql-picker-label { border-color: transparent !important; }
/* Hover/Active in Orange */
.ql-snow .ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
color: var(--color-accent) !important;
}
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker-label.ql-active .ql-stroke {
stroke: var(--color-accent) !important;
}
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
fill: var(--color-accent) !important;
}
/* === Quill Editor-Fläche === */
.ql-container.ql-snow {
border: 1px solid var(--color-border) !important;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
background: var(--color-bg);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-text);
}
.ql-editor {
min-height: 280px;
color: var(--color-text);
line-height: 1.6;
}
.ql-editor.ql-blank::before {
color: var(--color-text-dim) !important;
font-style: normal !important;
left: 1rem;
right: 1rem;
}
.ql-editor p { margin: 0 0 0.8rem; }
.ql-editor h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 1.4rem 0 0.6rem; color: var(--color-text); }
.ql-editor h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 1.2rem 0 0.5rem; color: var(--color-text); }
.ql-editor a { color: var(--color-accent); }
.ql-editor strong { color: #fff; }
.ql-editor blockquote {
border-left: 3px solid var(--color-accent) !important;
padding-left: 0.9rem !important;
color: var(--color-text-muted);
font-style: italic;
margin: 1rem 0;
}
.ql-editor ul, .ql-editor ol { padding-left: 1.5rem; }
/* Link-Tooltip (Quill rendert ein Popover für Link-Eingabe) */
.ql-snow .ql-tooltip {
background: var(--color-bg-card) !important;
border: 1px solid var(--color-border) !important;
box-shadow: var(--shadow) !important;
color: var(--color-text) !important;
border-radius: var(--radius-sm) !important;
}
.ql-snow .ql-tooltip input[type=text] {
background: var(--color-bg) !important;
border: 1px solid var(--color-border) !important;
color: var(--color-text) !important;
border-radius: var(--radius-sm) !important;
padding: 0.35rem 0.55rem !important;
}
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
color: var(--color-accent) !important;
}
/* Bei Validierungsfehler: roter Rand um Editor + Toolbar */
.field-modern.has-error .ql-toolbar.ql-snow,
.field-modern.has-error .ql-container.ql-snow {
border-color: var(--color-danger) !important;
}
/* === Datei-Input "schöner" machen (Cover-Upload) === */
.news-edit-file-input {
width: 100%;
padding: 0.55rem 0.6rem !important;
background: var(--color-bg) !important;
border: 1px dashed var(--color-border-light) !important;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.88rem;
cursor: pointer;
}
.news-edit-file-input::file-selector-button {
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
border: 1px solid rgba(145, 70, 255, 0.3);
padding: 0.35rem 0.7rem;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
margin-right: 0.7rem;
transition: background .15s;
}
.news-edit-file-input::file-selector-button:hover {
background: rgba(145, 70, 255, 0.2);
}
/* === Checkbox-Zeile "Cover entfernen" === */
.news-edit-checkbox {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1rem;
cursor: pointer;
user-select: none;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.news-edit-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color-accent);
cursor: pointer;
margin: 0;
flex-shrink: 0;
}
/* === Field-Hint -Tags lesbarer === */
.field-hint code {
background: rgba(145, 70, 255, 0.08);
color: var(--color-accent);
padding: 0.05rem 0.35rem;
border-radius: 4px;
font-size: 0.85em;
}
/* === News-Kommentare: Pending-State + Flash === */
.news-comments__flash {
background: rgba(78, 192, 122, 0.1);
border: 1px solid rgba(78, 192, 122, 0.3);
color: #6fd693;
padding: 0.7rem 0.9rem;
border-radius: var(--radius-sm);
margin: 0 0 1.25rem;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.news-comments__flash i { font-size: 1rem; }
.news-comment.is-pending {
border-color: rgba(145, 70, 255, 0.35);
background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-card));
}
.news-comment__flag--pending {
color: var(--color-accent);
background: rgba(145, 70, 255, 0.12);
border-color: rgba(145, 70, 255, 0.3);
}
/* === AdminCP: Source-Pills (Place vs News) im Kommentar-Header === */
.admin-pill--place {
background: rgba(78, 142, 230, 0.13);
color: #6e9fe5;
border: 1px solid rgba(78, 142, 230, 0.3);
}
.admin-pill--news {
background: rgba(145, 70, 255, 0.12);
color: var(--color-accent);
border: 1px solid rgba(145, 70, 255, 0.3);
}
/* Sub-Tab-Leiste (kleinere Filter unter den Hauptfilter-Tabs) */
.admin-tabs--sub {
margin-top: -0.5rem;
margin-bottom: 1.25rem;
font-size: 0.85rem;
opacity: 0.85;
}
.admin-tabs--sub .admin-tab {
padding: 0.3rem 0.7rem;
font-size: 0.82rem;
}
.admin-tabs--sub .admin-tab i {
margin-right: 0.3rem;
font-size: 0.78rem;
}
/* =====================================================================
ADMIN: User-Detail-Seite (admincp/user-edit.php)
===================================================================== */
.admin-userdetail {
max-width: 1200px;
margin: 0 auto;
}
.admin-userdetail__head {
margin-bottom: 1.5rem;
}
.admin-userdetail__back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.85rem;
margin-bottom: 0.75rem;
transition: color 0.15s;
}
.admin-userdetail__back:hover { color: var(--color-accent); }
.admin-userdetail__head-row {
display: flex;
gap: 1.25rem;
align-items: center;
}
.admin-userdetail__avatar {
flex: 0 0 auto;
}
.admin-userdetail__head-row h1 {
margin: 0 0 0.3rem;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.admin-userdetail__meta {
margin: 0;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.admin-userdetail__meta i {
color: var(--color-accent);
margin-right: 0.25rem;
}
/* Stats-Kacheln */
.admin-userdetail__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
.admin-userdetail__stats { grid-template-columns: repeat(2, 1fr); }
}
.admin-userdetail__stat {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
padding: 0.9rem 1rem;
text-align: center;
}
.admin-userdetail__stat i {
font-size: 1.1rem;
color: var(--color-accent);
display: block;
margin-bottom: 0.35rem;
}
.admin-userdetail__stat strong {
display: block;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.1;
}
.admin-userdetail__stat span {
font-size: 0.78rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Zwei-Spalten-Grid */
.admin-userdetail__grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 1.5rem;
}
@media (max-width: 900px) {
.admin-userdetail__grid { grid-template-columns: 1fr; }
}
.admin-userdetail__main { min-width: 0; }
.admin-userdetail__main .admin-card,
.admin-userdetail__side .admin-card {
margin-bottom: 1rem;
}
/* Form-Helfer */
.admin-edit-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
@media (max-width: 540px) {
.admin-edit-form__row { grid-template-columns: 1fr; }
}
.field-checkbox {
display: flex;
align-items: flex-start;
gap: 0.55rem;
cursor: pointer;
}
.field-checkbox input[type=checkbox] {
margin-top: 0.2rem;
}
.field-checkbox small {
color: var(--color-text-muted);
margin-left: 0.35rem;
}
.admin-quick-form {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
font-size: 0.88rem;
}
.admin-quick-form label { color: var(--color-text-muted); }
.admin-quick-form input[type=number] {
width: 70px;
padding: 0.35rem 0.5rem;
background: var(--color-bg-input);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
}
/* Login + Audit-Liste in der Sidebar */
.admin-loginlist,
.admin-auditlist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.admin-loginlist li,
.admin-auditlist li {
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-sm);
padding: 0.55rem 0.7rem;
font-size: 0.82rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.admin-loginlist time,
.admin-auditlist time {
color: var(--color-text-dim);
font-size: 0.75rem;
}
.admin-auditlist strong {
color: var(--color-text);
font-size: 0.85rem;
}
.admin-auditlist small {
color: var(--color-text-muted);
}
.admin-loginlist code {
color: var(--color-text-muted);
font-size: 0.78rem;
}
/* Danger Zone */
.admin-danger-zone summary {
cursor: pointer;
color: var(--color-danger);
font-size: 0.88rem;
padding: 0.4rem 0;
list-style: none;
user-select: none;
}
.admin-danger-zone summary i {
margin-right: 0.35rem;
}
.admin-danger-zone summary::-webkit-details-marker { display: none; }
.admin-danger-zone[open] summary {
margin-bottom: 0.75rem;
}
.btn--block {
display: flex !important;
width: 100%;
justify-content: center;
}
/* === Abo & Zahlungen: Rechnungsliste === */
.abo-payment-method {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1.1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
margin-bottom: 1.4rem;
color: var(--text-muted);
}
.abo-payment-method i {
color: var(--accent);
}
.abo-payment-method strong {
color: var(--text-strong);
font-weight: 600;
}
.invoice-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.invoice-list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.1rem;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
transition: background 0.2s;
}
.invoice-list__item:hover {
background: rgba(255, 255, 255, 0.04);
}
.invoice-list__info {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.invoice-list__info strong {
color: var(--text-strong);
font-size: 1.05rem;
}
.invoice-list__date {
color: var(--text-muted);
font-size: 0.9rem;
}
.invoice-list__number {
color: var(--text-muted);
opacity: 0.7;
font-size: 0.78rem;
}
.invoice-list__actions {
display: flex;
align-items: center;
gap: 0.7rem;
flex-shrink: 0;
}
.invoice-list__status {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-muted);
}
.invoice-list__status--paid {
background: rgba(46, 187, 100, 0.15);
color: #5fc787;
}
.invoice-list__status--open {
background: rgba(145, 70, 255, 0.15);
color: var(--accent);
}
.btn--sm {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
@media (max-width: 600px) {
.invoice-list__item {
flex-direction: column;
align-items: flex-start;
}
.invoice-list__actions {
width: 100%;
justify-content: space-between;
}
}
/* === Abo: Nächste Abbuchung Info-Box === */
.abo-next-billing {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.25rem;
padding: 1rem 1.2rem;
background: rgba(145, 70, 255, 0.06);
border: 1px solid rgba(145, 70, 255, 0.2);
border-radius: 10px;
}
.abo-next-billing > i {
color: var(--accent);
font-size: 1.3rem;
flex-shrink: 0;
}
.abo-next-billing__text {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.abo-next-billing__label {
color: var(--text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.abo-next-billing__text strong {
color: var(--text-strong);
font-size: 1.05rem;
font-weight: 600;
}
.abo-next-billing__amount {
color: var(--text-strong);
font-size: 1.15rem;
font-weight: 700;
flex-shrink: 0;
}
.abo-next-billing__sub {
color: var(--text-muted);
font-size: 0.85rem;
margin-top: 0.2rem;
line-height: 1.4;
}
/* Variante bei Kündigung: andere Farbe (gedämpfter), zeigt Restlaufzeit */
.abo-next-billing--cancelled {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.08);
}
.abo-next-billing--cancelled > i {
color: var(--text-muted);
}