/* ======================================================================= Backdoor – Global CSS (neutral) + Booking-Theme (Rot/Weiss) Pfad: /backdoor/assets/backdoor.css ======================================================================= */ /* ----------------------------- Root & Reset ---------------------------- */ :root{ --bd-red: #e31f26; --bd-white: #ffffff; --bd-font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } *, *::before, *::after{ box-sizing:border-box; text-shadow:none; } html, body{ height:100%; } /* Neutrale Basis (für andere Seiten als 'booking') */ body{ margin:0; font-family:var(--bd-font); background:#fafafa; color:#222; line-height:1.35; } a{ color:var(--bd-red); text-decoration:none; } a:hover{ text-decoration:underline; } button, input, select, textarea{ font:inherit; color:inherit; background:transparent; border:1px solid #ccc; border-radius:8px; padding:.5rem .8rem; outline:none; } button{ cursor:pointer; } button:disabled{ opacity:.6; cursor:not-allowed; } :focus{ outline:2px solid var(--bd-red); outline-offset:2px; } /* Container & Utilities (neutral) */ .container{ max-width:1120px; margin:0 auto; padding:0 16px; } .text-center{ text-align:center } .text-right{ text-align:right } .hidden{ display:none !important } /* Neutrale Komponenten */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border-radius:10px; border:1px solid currentColor; background:transparent; color:inherit; text-decoration:none; cursor:pointer; line-height:1; } .btn.primary{ background:var(--bd-red); border-color:var(--bd-red); color:#fff; } .btn.ghost{ border-color:currentColor; background:transparent; } .card{ border:1px solid #ddd; border-radius:12px; background:#fff; color:#222; padding:1rem; } .frame{ border:1px solid #ddd; border-radius:14px; background:#fff; color:#222; padding:1rem; } /* ======================================================================= BOOKING – Rot/Weiss-Theme Aktiv nur, wenn gesetzt ist. ======================================================================= */ body.booking{ background:var(--bd-red); color:var(--bd-white); overflow-x:hidden; /* niemals horizontal scrollen */ font-family:var(--bd-font); } /* ALLES Weiss (Text) + keine Schatten; hiermit schlagen keine dunklen Defaults durch */ body.booking, body.booking *{ color:#fff !important; text-shadow:none !important; box-shadow:none !important; } /* Links/Inputs/Buttons auf Booking-Seite */ body.booking a, body.booking button, body.booking input, body.booking select, body.booking textarea{ color:#fff !important; background:transparent !important; border-color:#fff !important; } body.booking ::placeholder{ color:rgba(255,255,255,.9); } body.booking :focus{ outline:2px solid #fff !important; outline-offset:2px !important; } /* ---------- Layout-Blöcke (Klassen aus der Buchungsseite) ---------- */ /* Seitenbreite */ body.booking .page{ max-width:1120px; margin:0 auto; padding:0 8px; } /* Topbar: kleine Buttons in den Ecken (Zurück / Sprache) */ body.booking .bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:8px; } body.booking .topbtn, body.booking .lang{ height:22px; min-width:90px; max-width:150px; border:2px solid #fff !important; background:transparent !important; color:#fff !important; border-radius:8px; padding:.15rem .5rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; line-height:1; text-decoration:none; cursor:pointer; } body.booking .lang{ appearance:none; -webkit-appearance:none; -moz-appearance:none; text-align:center; text-align-last:center; -moz-text-align-last:center; } /* Logozeile */ body.booking .logoWrap, body.booking .logo{ display:flex; justify-content:center; align-items:center; margin:4px 0 10px; } body.booking .logoWrap img, body.booking .logo img{ max-width:300px; width:55%; height:auto; display:block; } /* ÄUSSERSTER RAHMEN: Rot mit weisser Kontur, alles drin */ body.booking .frame, body.booking .outer{ background:var(--bd-red) !important; border:2px solid #fff !important; border-radius:14px; padding:12px; margin:0 auto 10px; max-width:100%; overflow:hidden; } /* Panels untereinander (robust) */ body.booking .panel{ background:var(--bd-red) !important; border:2px solid #fff !important; color:#fff !important; border-radius:12px; padding:12px; margin:0 0 10px 0; } body.booking .panel h3{ margin:.4rem 0 .8rem; text-align:center; font-weight:800; } /* Personenzeilen */ body.booking .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px dashed rgba(255,255,255,.65); } body.booking .row:first-of-type{ border-top:none; } body.booking .who{ text-align:center; } body.booking .who .title{ font-weight:800; } body.booking .who .hint{ opacity:.9; } body.booking .counter{ display:flex; align-items:center; gap:8px; } body.booking .icon-btn, body.booking .ctl{ width:34px; height:34px; border-radius:8px; border:2px solid #fff !important; background:transparent !important; color:#fff !important; display:grid; place-items:center; font-size:16px; cursor:pointer; } body.booking .val{ min-width:42px; text-align:center; font-weight:800; font-size:1rem; } /* Erster/Letzter Miettag – Rahmen/Text weiss */ body.booking .tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:.2rem 0 .8rem; } body.booking .tag{ border:2px solid #fff !important; border-radius:999px; padding:.25rem .7rem; background:transparent; text-align:center; } body.booking .tag strong{ color:#fff !important; } /* Kalender */ body.booking .calwrap, body.booking .cal{ border:2px solid #fff !important; border-radius:12px; padding:10px; } body.booking .cal-head, body.booking .calHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } body.booking .cal-head .label, body.booking .calHead .label{ flex:1; text-align:center; opacity:.95; } body.booking .navbtn, body.booking .nav{ height:34px; min-width:68px; border:2px solid #fff !important; border-radius:8px; font-size:13px; background:transparent !important; color:#fff !important; } body.booking .cal-months, body.booking .months{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:680px){ body.booking .cal-months, body.booking .months{ grid-template-columns:1fr } } body.booking .month h4{ margin:.2rem 0 .6rem; text-align:center; color:#fff !important; } body.booking .dow, body.booking .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } body.booking .dow div{ text-align:center; color:#fff !important; } body.booking .day{ height:36px; border:2px solid #fff !important; border-radius:9px; background:transparent !important; color:#fff !important; display:grid; place-items:center; cursor:pointer; font-weight:800; } body.booking .day.disabled{ opacity:.4; cursor:not-allowed; } body.booking .day.inrange{ background:rgba(255,255,255,.12) !important; } /* Ausgewählte Tage: Hintergrund/Border weiss – Ziffer ROT (sichtbar) */ body.booking .day.start, body.booking .day.end{ background:#fff !important; border-color:#fff !important; color:var(--bd-red) !important; } body.booking .day.start span, body.booking .day.end span{ color:var(--bd-red) !important; font-weight:900 !important; } /* Zusammenfassung – Chips weiss gerahmt */ body.booking .summary{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; } body.booking .chip{ border:2px solid #fff !important; border-radius:999px; padding:.25rem .7rem; color:#fff !important; } /* Dünne rote Linie über dem Button */ body.booking .cta-sep, body.booking .sep{ height:2px; background:var(--bd-red); margin:10px 0 0; } /* „Weiter“: weisser Rahmen (sicher), Button füllt, Text gross & zentriert */ body.booking .cta{ border:2px solid #fff !important; border-radius:12px; margin-top:0; overflow:hidden; } body.booking .btn-cta, body.booking .go{ display:flex !important; align-items:center !important; justify-content:center !important; width:100%; height:64px; background:var(--bd-red) !important; color:#fff !important; border:none !important; font-weight:900 !important; font-size:32px !important; letter-spacing:.2px; } /* Footer */ body.booking footer .copy{ text-align:center; padding:12px 0; color:#fff !important; }