/* ── Castello Seeschloss Theme ─────────────────────────────────────────────── Inspired by the Romantik Hotel Castello Seeschloss in Ascona on Lago Maggiore (castello-seeschloss.ch): a near-black petrol/teal navigation (lake water), warm brass-gold accents (golden hour) and soft sand-cream backgrounds — an elegant, Mediterranean lakeside look. Activated when . Palette: #173a3c petrol · #1f4b4d petrol-hover · #b3923f brass-gold #95772f gold-dark · #f4efe6 sand-cream · #ece3d4 cream-input ────────────────────────────────────────────────────────────────────────── */ [data-app-theme="castello"] { /* Brand palette */ --brand-petrol: #173a3c; --brand-petrol-hover: #1f4b4d; --brand-gold: #b3923f; --brand-gold-hover: #95772f; --brand-cream: #f4efe6; --brand-cream-input: #ece3d4; --brand-cream-line: #ddd2c0; --brand-text-on-petrol:#ffffff; --brand-icon-on-petrol:#cdb98a; /* Token overrides */ --bg-primary: #ffffff; --bg-secondary: var(--brand-cream); --bg-tertiary: #ece3d4; --bg-quaternary: #ddd2c0; --accent: var(--brand-gold); --accent-hover: var(--brand-gold-hover); --accent-light: rgba(179, 146, 63, 0.14); /* Aktive Buttons/Tabs: dunkles Petrol statt hellem Gold (weißer Text lesbar) */ --btn-active-bg: var(--brand-petrol); --text-primary: #1d3a3b; --text-secondary: rgba(29, 58, 59, 0.65); --text-tertiary: rgba(29, 58, 59, 0.40); --text-on-accent: #ffffff; --border: rgba(23, 58, 60, 0.12); --border-strong: rgba(23, 58, 60, 0.22); /* Sidebar uses brand petrol instead of frosted-glass */ --sidebar-bg: var(--brand-petrol); } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ [data-app-theme="castello"] .sidebar { background: var(--brand-petrol); border-right: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-app-theme="castello"] .sidebar-icon { color: var(--brand-icon-on-petrol); } [data-app-theme="castello"] .sidebar-icon:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } [data-app-theme="castello"] .sidebar-icon.active { background: var(--brand-gold); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } [data-app-theme="castello"] .sidebar-brand { background: var(--brand-gold); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } [data-app-theme="castello"] .sidebar-sep { background: rgba(255, 255, 255, 0.10); } [data-app-theme="castello"] .lang-btn { color: rgba(255, 255, 255, 0.45); } [data-app-theme="castello"] .lang-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; } [data-app-theme="castello"] .lang-btn.active { background: var(--brand-gold); color: #fff; } /* ── Tooltip on dark sidebar ─────────────────────────────────────────────── */ [data-app-theme="castello"] .sidebar-icon::after { background: #fff; color: var(--brand-petrol); border-color: var(--brand-cream-line); } /* ── Tables: dark petrol header bar ──────────────────────────────────────── */ [data-app-theme="castello"] thead { background: var(--brand-petrol); border-bottom: 1px solid var(--brand-petrol); } [data-app-theme="castello"] thead th { color: #fff; letter-spacing: 0.4px; } [data-app-theme="castello"] tr:hover td { background: var(--brand-cream); } /* ── Buttons: petrol pills (Aktionsfarbe app-weit) ───────────────────────── */ [data-app-theme="castello"] .btn-primary { background: var(--brand-petrol); color: #fff; border-radius: var(--radius-md); font-weight: 600; } [data-app-theme="castello"] .btn-primary:hover { background: var(--brand-petrol-hover); box-shadow: 0 2px 8px rgba(23, 58, 60, 0.30); } /* ── Cards: warm cream tint ─────────────────────────────────────────────── */ [data-app-theme="castello"] .card { border-color: var(--brand-cream-line); } /* ── Pill-tab component (opt-in, used by templates that adopt .tab-pills) ── */ [data-app-theme="castello"] .tab-pills { display: flex; gap: var(--space-2); padding: var(--space-3); background: transparent; flex-wrap: wrap; } [data-app-theme="castello"] .tab-pills > .tab, [data-app-theme="castello"] .tab-pills > a { padding: 8px 24px; border-radius: var(--radius-md); background: var(--brand-petrol); color: #fff; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } [data-app-theme="castello"] .tab-pills > .tab:hover, [data-app-theme="castello"] .tab-pills > a:hover { background: var(--brand-petrol-hover); box-shadow: 0 2px 8px rgba(23, 58, 60, 0.28); } /* aktiver Tab in Gold als Jewel-Akzent — hebt sich von den Petrol-Pills ab */ [data-app-theme="castello"] .tab-pills > .tab.active, [data-app-theme="castello"] .tab-pills > a.active { background: var(--brand-gold); color: #fff; } /* ── Entity header bar (opt-in, .entity-header) ──────────────────────────── */ [data-app-theme="castello"] .entity-header { background: var(--brand-petrol); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: var(--space-4); } [data-app-theme="castello"] .entity-header a, [data-app-theme="castello"] .entity-header .entity-meta { color: #fff; } /* ── Form inputs: warm cream tint to match the look ──────────────────────── */ [data-app-theme="castello"] input[type="text"], [data-app-theme="castello"] input[type="email"], [data-app-theme="castello"] input[type="password"], [data-app-theme="castello"] input[type="number"], [data-app-theme="castello"] input[type="tel"], [data-app-theme="castello"] input[type="url"], [data-app-theme="castello"] input[type="date"], [data-app-theme="castello"] input[type="time"], [data-app-theme="castello"] input[type="datetime-local"], [data-app-theme="castello"] input[type="search"], [data-app-theme="castello"] select, [data-app-theme="castello"] textarea { background: var(--brand-cream-input); border-color: var(--brand-cream-line); } [data-app-theme="castello"] input:focus, [data-app-theme="castello"] select:focus, [data-app-theme="castello"] textarea:focus { border-color: var(--brand-petrol); box-shadow: 0 0 0 3px rgba(23, 58, 60, 0.16); } /* ── Login-Favicon-Badge: petrol statt weiss, damit ein weisses/helles Logo sichtbar bleibt und das Badge zum Theme passt. Höhere Spezifität als die Inline-Regel in login.html (`.login-logo.has-favicon`) → gewinnt. ──────── */ [data-app-theme="castello"] .login-logo.has-favicon { background: var(--brand-petrol); border-color: rgba(255, 255, 255, 0.14); } /* ── Login: petrol als Aktionsfarbe — Anmelden-Button + Feld-Umrandungen statt Gold, passend zum Petrol-Badge. Auf die `.login-card` begrenzt; die In-App-Buttons bleiben gold. ID/Klassen-Spezifität schlägt die Inline-Regeln in login.html und die `.btn-primary`-Theme-Regel. ─────────────────────── */ [data-app-theme="castello"] .login-card #submit-btn, [data-app-theme="castello"] .login-card .sso-btn { background: var(--brand-petrol); } [data-app-theme="castello"] .login-card #submit-btn:hover, [data-app-theme="castello"] .login-card .sso-btn:hover { background: var(--brand-petrol-hover); } [data-app-theme="castello"] .login-card input { border-color: rgba(23, 58, 60, 0.30); } [data-app-theme="castello"] .login-card input:focus { border-color: var(--brand-petrol); box-shadow: 0 0 0 3px rgba(23, 58, 60, 0.15); }