/* ScanCasa — schlichtes, mobile-first Stylesheet. Kein Framework. */ :root { --color-bg: #f6f4f1; --color-card: #ffffff; --color-input-bg: #ffffff; --color-text: #1f2421; --color-text-muted: #6b7280; --color-border: #e6e1da; /* Terrakotta als Markenfarbe — angelehnt an die warmen Fassaden- und Dachziegel-Töne spanischer Ortschaften, statt eines "corporate" Blaus oder Monochrom-Schwarz. */ --color-accent: #c1502e; --color-accent-hover: #a8431f; --color-accent-text: #ffffff; /* Gedecktes Terrakotta/Petrol als zweite Markenfarbe für Akzente/Links, die sich vom knalligen CTA-Terrakotta absetzen sollen. */ --color-brand-2: #2a6f68; --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-text: #15803d; --color-success-border: #bbf7d0; --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-danger-text: #b91c1c; --color-danger-border: #fecaca; --color-warn: #ca8a04; --color-warn-bg: #fffbeb; --color-shadow: rgba(31, 24, 18, 0.1); --radius: 14px; --radius-pill: 999px; --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --max-width: 640px; /* Die Landingpage darf auf großen Bildschirmen breiter atmen als die Formular-Seiten (Signup/Dashboard) — dort bleibt die schmalere Breite, weil Formulare auf breiten Bildschirmen unangenehm lang wirken. */ --max-width-wide: 980px; /* Die Suchergebnis-Seite braucht noch etwas mehr Breite als die Landing- page — Filter-Sidebar + Ergebnisliste nebeneinander (ab Desktop). */ --max-width-search: 1180px; } /* Dunkler Modus — folgt standardmäßig der Systemeinstellung (prefers-color-scheme), kann aber über den Umschalter im Header überstimmt werden (setzt data-theme="dark"/"light" auf , siehe partials/head.ejs + foot.ejs). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #17140f; --color-card: #221d17; --color-input-bg: #17140f; --color-text: #f5f1ea; --color-text-muted: #a89e8f; --color-border: #3a3227; --color-accent: #e0703f; --color-accent-hover: #ef8656; --color-accent-text: #1f1208; --color-brand-2: #4fa89c; --color-success: #22c55e; --color-success-bg: #052e16; --color-success-text: #4ade80; --color-success-border: #14532d; --color-danger: #f87171; --color-danger-bg: #450a0a; --color-danger-text: #fca5a5; --color-danger-border: #7f1d1d; --color-warn: #eab308; --color-warn-bg: #422006; --color-shadow: rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --color-bg: #17140f; --color-card: #221d17; --color-input-bg: #17140f; --color-text: #f5f1ea; --color-text-muted: #a89e8f; --color-border: #3a3227; --color-accent: #e0703f; --color-accent-hover: #ef8656; --color-accent-text: #1f1208; --color-brand-2: #4fa89c; --color-success: #22c55e; --color-success-bg: #052e16; --color-success-text: #4ade80; --color-success-border: #14532d; --color-danger: #f87171; --color-danger-bg: #450a0a; --color-danger-text: #fca5a5; --color-danger-border: #7f1d1d; --color-warn: #eab308; --color-warn-bg: #422006; --color-shadow: rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Kein globales scroll-behavior:smooth — das lässt manche Browser den Sprung zu einem #anchor beim ERSTEN Laden der Seite (z.B. Klick auf "Suscripción" im "Mein Profil"-Menü) stillschweigend auslassen, weil das Smooth-Scrolling vor Abschluss des Layouts startet. Der normale, sofortige Sprung funktioniert dagegen zuverlässig — nur die Zielposition wird unten per scroll-margin-top korrigiert, damit der sticky Header sie nicht überdeckt. */ /* Anker-Ziele im Dashboard (#ajustes, #notificaciones, #suscripcion, siehe partials/head.ejs "Mein Profil"-Menü) — ohne das würde der sticky Header die Überschrift beim Hinspringen überdecken. */ #ajustes, #notificaciones, #suscripcion { scroll-margin-top: 90px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Der Hero-Banner bricht absichtlich per negativer Margin aus der Content-Spalte aus (voller Bildschirmbreite) — ohne dies könnte das bei manchen Bildschirmbreiten/Scrollbar-Kombinationen einen minimalen horizontalen Scrollbalken erzeugen. */ overflow-x: hidden; } .container { max-width: var(--max-width); margin: 0 auto; padding: 24px 16px 48px; } body.page-landing .container { max-width: var(--max-width-wide); /* Der Hero-Banner steht als erstes Element im Container und soll direkt unter dem Header beginnen, nicht mit dem üblichen Innenabstand. */ padding-top: 0; } body.page-search .container { max-width: var(--max-width-search); } /* Login/Signup — dezentes Hintergrundfoto (Wohnstraße in Barcelona, vom Nutzer bereitgestelltes, lizenzfreies Foto — höhere Auflösung als das vorherige) hinter der Formular-Karte statt schlichtem Einfarbig. */ body.page-auth { background: linear-gradient(180deg, rgba(23, 18, 12, 0.5), rgba(23, 18, 12, 0.72)), url("/images/parked-cars-in-narrow-lane.jpg") center / cover no-repeat; min-height: 100vh; } body.page-auth .container { padding-top: 40px; } body.page-auth h1, body.page-auth > .container > p:not(.hint):not(.error-text) { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } /* Skip-Link — für Tastatur-/Screenreader-Nutzer, damit sie nicht bei jeder Seite erst durch Header-Navigation/Sprachumschalter tabben müssen. Unsichtbar, bis es per Tab fokussiert wird. */ .skip-link { position: absolute; top: -60px; left: 8px; z-index: 1000; background: var(--color-accent); color: var(--color-accent-text); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: top 0.15s; } .skip-link:focus { top: 8px; } header.site-header { padding: 20px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-card); position: sticky; top: 0; z-index: 500; box-shadow: 0 1px 0 var(--color-border), 0 4px 16px var(--color-shadow); } header.site-header .container { padding: 0; display: flex; align-items: center; justify-content: space-between; } .logo { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none; } .logo span { color: var(--color-accent); } /* Auf dem Handy nimmt das Haus-Emoji unnötig Platz neben dem Namen weg — ab Desktop-Breite bleibt es (siehe media query unten). */ .logo-emoji { display: none; } @media (min-width: 640px) { .logo-emoji { display: inline; } } /* display:flex nötig, seit site-nav nicht mehr nur -Links (inline von Natur aus) enthält, sondern auch das "Herramientas"-
-Dropdown (block-level) — ohne das brach es in eine eigene Zeile UNTER/ÜBER "Mein Profil" um, statt sauber daneben zu stehen. */ nav.site-nav { display: flex; align-items: center; gap: 10px; } nav.site-nav a { color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; } nav.site-nav a:hover { color: var(--color-text); } .header-right { display: flex; align-items: center; gap: 16px; } .lang-switch { display: flex; gap: 4px; border-left: 1px solid var(--color-border); padding-left: 12px; } .lang-switch a { color: var(--color-text-muted); text-decoration: none; font-size: 12px; font-weight: 700; padding: 3px 6px; border-radius: 4px; } .lang-switch a:hover { background: var(--color-bg); color: var(--color-text); } .lang-switch a.active { background: var(--color-text); color: var(--color-bg); } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-card); cursor: pointer; font-size: 15px; line-height: 1; } .theme-toggle:hover { background: var(--color-bg); } /* "Mein Profil"-Dropdown im Header (ersetzt Login/Registrieren-Links, sobald eine Session existiert — siehe partials/head.ejs). Baut auf dem nativen
/ auf: braucht kein JS für Auf-/Zuklappen, nur fürs Schließen bei Klick außerhalb (siehe partials/foot.ejs). */ .profile-menu { position: relative; } .profile-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); } .profile-menu summary::-webkit-details-marker { display: none; } .profile-menu summary:hover { background: var(--color-bg); } .profile-menu-icon { font-size: 14px; } .profile-menu-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 600; min-width: 200px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 12px 32px var(--color-shadow); padding: 6px; display: flex; flex-direction: column; } /* .header-right vorangestellt, damit diese Regel sicher stärker wiegt als "nav.site-nav a" (die Dropdown-Links liegen selbst innerhalb von