/* CSS Document */ /* @import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700); */ /* latin */ @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: url(droidsans400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; src: url(droidsans700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== Design-Tokens (neuer Look, schrittweise ausgerollt) ===== Eine Quelle der Wahrheit für den Akzent. Ziel: die alten Blautöne (u. a. #65a9dd) nach und nach durch var(--accent) ersetzen – öffentliche Seiten zuerst, dann Vermieter-Bereich. Neue Regeln bitte auf diese Variablen setzen statt Hex-Werte hart zu verdrahten. */ :root { --accent: #2f80c6; /* Primär-Akzent (Buttons, Links, aktive Zustände) */ --accent-strong: #276fae; /* dunkler – Hover/gedrückt */ --accent-soft: #4aa6e6; /* heller – Verläufe, sekundäre Flächen */ --accent-tint: #eaf3fb; /* sehr helle Tönung – Hintergründe, Range-Markierung */ --radius: 14px; /* Standard-Eckenradius neuer Komponenten */ --radius-btn: 999px; /* alle Aktions-Buttons/CTAs = Pille (einheitliche Geometrie) */ --shadow-card: 0 10px 30px rgba(28,58,92,.13), 0 2px 6px rgba(28,58,92,.08); } * { margin:0; font-family: 'Droid Sans', sans-serif; } html, body, #wrapper { background-color:#d9d1bf; font-size:11pt; color:#474746; line-height:17pt; } body { display:flex; flex-direction:column; min-height:100vh; } body > #wrapper { flex:1 0 auto; display:flex; flex-direction:column; } .small, small { font-size:10pt; } img { border:0; } h1, h2, h3 { font-weight:normal; } h1 { margin-bottom:10px; margin-top:5px; font-size: 20pt; line-height:32pt; font-weight:400; } /* dezent wie start-headline */ h2 { margin-bottom:7px; margin-top:3px; font-size: 16pt; line-height:22pt; font-weight:600; } h3 { margin-bottom:7px; margin-top:3px; font-size: 13pt; line-height:19pt; font-weight:600; } p { margin-bottom:20px; } a { cursor: pointer; color: #66A9DD; } a:hover, a:active { color: #474746; } a.menulink { color:#474746; text-decoration:none; } a.menulink:hover { text-decoration:underline; } img.rounded { border-radius:6px; } /* Einheitliche Bild-Rundung portalweit: alle Content-Bilder (Fewo-Fotos, Galerie, Vorschauen, Detail-Header) bekommen denselben Radius. Logo und Theme-Bild liegen ausserhalb von #content und bleiben eckig; Avatare clippen ihren Kreis selbst. */ #content .inside img { border-radius:6px; } hr { height: 1px; margin:10px 0px 10px 0px; border:none; border-top:1px dotted;} /* Form input fields */ .button, input, select, textarea { font-size:0.9em; padding:8px; border-radius:2px; border:1px solid #ccc; } input, textarea { width: -moz-calc(100% - 18px); /* Firefox */ width: -webkit-calc(100% - 18px); /* WebKit */ width: -o-calc(100% - 19px); /* Opera */ width: calc(100% - 19px); /* Standard */ } textarea { height:70px; } textarea.textarea_big { height:140px; } select { width:100%; } /* ===== Button-System (Tiered) ===== Geometrie = Pille (global). Füllung staffelt Wichtigkeit: .button = Alltags-Primär (flach, satt --accent) .btn-cta = Top-/Marketing-CTA (Gradient, bewusst rar) .btn-ghost = Sekundär (Outline) .btn-danger = Destruktiv (rot) Tier-Klassen werden an .button/input drangehängt und überschreiben nur die Füllung. */ .button, input.button, input[type="button"], input[type="submit"] { font-size:1em; border:none; border-radius:var(--radius-btn); cursor: pointer; width:auto; padding:8px 18px; text-align:center; background-color:var(--accent); color:#fff; } .button:hover, input.button:hover, input[type="button"]:hover, input[type="submit"]:hover { background-color:var(--accent-strong); } .btn-cta { background:linear-gradient(135deg, var(--accent-soft), var(--accent)) !important; box-shadow:0 3px 10px rgba(47,128,198,.28); } .btn-cta:hover { filter:brightness(1.06); } .btn-ghost { background:transparent !important; color:var(--accent) !important; box-shadow:inset 0 0 0 1.5px var(--accent); } .btn-ghost:hover { background:var(--accent-tint) !important; color:var(--accent-strong) !important; } .btn-danger { background:#d9534f !important; color:#fff !important; } .btn-danger:hover { background:#c9433f !important; } /* .btn-success = gewuenschte Aktion hervorheben (z.B. "Freigeben", wenn eine Wohnung startklar ist). Bewusst sparsam: nur wo die Aktion die Ausnahme ist, nicht der Normalfall. */ .btn-success { background:#3d8b3d !important; color:#fff !important; } .btn-success:hover { background:#337533 !important; } input.checkbox, input[type="checkbox"], input[type="radio"] { display:inline-block; margin:5px 3px 8px 0px; vertical-align:middle; width:17px; height:17px; border:1px solid #ccc; } a.button { text-decoration:none; font-size:1em; padding:8px; white-space:nowrap; } a.button:hover { color:#fff; } label { display:block; font-size:0.95em; margin: 0px 0px 3px 9px; } label.checkbox { display:inline-block; } label.error { font-size:0.75em; margin: 4px 0px 3px 9px; } pre { background-color: #E0EDED; border: 1px solid #66a9de; padding:5px; } /* IE-Patch für IE 7*/ *:first-child+html .clearfix { min-height: 0; } /* IE-Patch für IE 6*/ * html .clearfix { height: 1%; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .center { text-align:center; } .clear { clear:both; } .clearleft { clear:left; } .clearright { clear:right; } .error { color:#C00; } p.error, div.error { color:#fff; margin:10px 0px 20px 0px; border-radius:5px; background-color:#d9534f; padding:10px; } p.error a, div.error a { color:#fff; } .notice { color:#090; } p.notice, div.notice { color:#fff; margin:10px 0px 20px 0px; border-radius:5px; background-color:#5cb85c; padding:10px; } /* Neutraler Hinweis (kein Erfolg!) - z.B. auf Prüf-Schritten, wo noch nichts passiert ist */ p.hint, div.hint { color:#474746; margin:10px 0px 20px 0px; border-radius:5px; background-color:#eef3f7; border-left:4px solid #65a9dd; padding:10px; } .green { color:#5cb85c; } .red { color:#d9534f; } .yellow { color:#FF3; } .orange { color:#c77405; } /* dunkler als reines Orange, damit es auf Weiss noch lesbar bleibt */ i.big, .big { font-size:2.5em; } i.listicon, .listicon { float:left; margin-right:20px; margin-bottom:15px; font-size:2em; } i.h1symbol { font-size:3em; float:left; margin-right:10px; } .tooltip { cursor:pointer;color:#65a9dd; } /* Flex Layout */ .flex { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .flex.flex-row { flex-flow: row wrap; flex-wrap: wrap; justify-content: space-between; } #header { background-color:rgba(255, 255, 255, 0.8); width:100%; } #header.ontop { position: relative; z-index: 2; } /* Header sitzt über dem Hero (kein Overlay), einheitlich mit Mobil */ #header .inside { margin:0 auto; max-width:1214px; } /* Logo + Nav als eine vertikal zentrierte Zeile (Flex statt der alten Floats), mit etwas Luft. */ #header .inside .menu { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 18px; } #header .inside .menu div { display:block; padding:8px 10px; } #header .inside .menu .suche a { font-size:0.9em; } #header .inside a { color:#474746; text-decoration:none; } /* ===== Header-Navigation (modernisiert: kühl + Akzent-Pille als primärer Vermieter-CTA) ===== */ #header .header-navwrap { line-height:normal; } #header .header-nav { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; } #header .header-nav .header-link { display:inline-flex; align-items:center; gap:7px; color:#5b6b7a; font-weight:600; font-size:10.5pt; } #header .header-nav .header-link i { color:var(--accent); } #header .header-nav .header-link:hover { color:var(--accent); } #header .header-nav .header-cta { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--accent-soft), var(--accent)); color:#fff; padding:9px 20px; border-radius:var(--radius-btn); font-weight:600; font-size:10.5pt; box-shadow:0 3px 10px rgba(47,128,198,.28); transition:filter .12s ease, transform .12s ease; } #header .header-nav .header-cta i { color:#fff; } #header .header-nav .header-cta:hover { color:#fff; filter:brightness(1.06); transform:translateY(-1px); } .theme-picture { position:relative; margin:0 auto; width:100%; max-width:1214px; height:460px; flex-shrink:0; background:#d9d1bf url("/img/theme.jpg") no-repeat center 42%; background-size:cover; } .theme-picture img { position:absolute; right:7%; top:50%; transform:translateY(-50%); width:460px; max-width:44%; } #content { padding-bottom:0; flex:1 0 auto; display:flex; flex-direction:column; } /* Sticky Footer per Flexbox (siehe body); Flex-Kette füllt den Content bis zum Footer */ #content .inside { padding:1px 0px 1px 0px; margin:0 auto; width:100%; max-width:1214px; } /* Container for the content-containers; width:100% nötig, da #content jetzt Flexbox ist (sonst schrumpft margin:auto die Breite) */ /* Content bis zum Footer füllen – OHNE Magic-Value, per Flex-Kette (body > #wrapper > #content > .inside). Einspaltige Seiten (mit ODER ohne Sidebar-Menü) werden zur Flex-Spalte; die letzte Box wächst in den Rest. Die 1px-Trenner bleiben erhalten (Boxen sind Flex-Items mit Margin). Zweispaltige Layouts (.midleft/.right, .bigmidleft/.bigright) sind ausgenommen, weil deren Spalten per float nebeneinander liegen und Flexbox sie sonst untereinander umbrechen würde. */ #content .inside:not(:has(.midleft, .content.right, .bigmidleft, .bigright)) { flex:1 0 auto; display:flex; flex-direction:column; position:relative; } /* Sidebar-Menü aus dem Flex-Fluss nehmen, damit die Content-Spalte die Höhe allein füllt. Breite/Verhalten des Menüs kommen unverändert aus den bestehenden .left-Regeln. */ #content .inside:not(:has(.midleft, .content.right, .bigmidleft, .bigright)) > .left { position:absolute; top:1px; bottom:2px; left:0; background-color:#fff; } /* Sidebar-Seiten: .inside mind. so hoch wie das (absolute) Menü, damit es bei kurzem Content / niedrigem Fenster nicht in den Footer ragt. Auf hohen Fenstern gewinnt die Flex-Füllung. */ #content .inside:not(:has(.midleft, .content.right, .bigmidleft, .bigright)):has(> .left) { min-height: 640px; } #content .inside:not(:has(.midleft, .content.right, .bigmidleft, .bigright)) > .content:last-child:not(.right) { flex:1 0 auto; } /* Zweispaltige Seiten (Buchungsstrecke, FeWo-Detail): deren Spalten liegen als Floats nebeneinander, die Flex-Fuellung oben greift dort also nicht. Stattdessen traegt der Container selbst die weisse Flaeche und waechst bis zum Footer - die Spalten liegen darauf. Wirkung: unter der kuerzeren Spalte hoert das Weiss nicht mehr mitten auf der Seite auf. */ #content .inside:has(> .bigmidleft, > .bigright) { flex:1 0 auto; background-color:#fff; } /* Admin and Vermieter menu */ #content .inside .menu { background-color:#fff; list-style-type:none; padding:0px 0px 0px 0px; } #content .inside .menu a { text-decoration:none; display:block; padding:15px; border-left:4px solid #fff; color:#474746; } #content .inside .border-left a:hover, #content .inside .border-left .active { border-left:4px solid #aaa; text-decoration:none; } #content .inside .menu .profile { padding:15px 5px 15px 10px; } #content .inside .menu .profile td { vertical-align:middle; } /* Avatar mittig zum Namen/Badge-Stapel */ #content .inside .menu .profile .text { padding-left:6px; } /* Subscription-Badge in der Sidebar: Politur kommt aus den .subscription-*-Basisklassen, hier nur die Sidebar-Feinheiten (etwas kompakter, kleiner Abstand zum Namen). */ #content .inside .menu .profile .subscription-basic, #content .inside .menu .profile .subscription-premium, #content .inside .menu .profile .subscription-business { margin-top:3px; padding:1px 7px 0px 7px; font-size:10px; } #content .inside .menu table { margin:0; } #content .inside .menu table td { padding:3px; } #content .inside .menu i { font-size: 15pt; margin-right:13px; } /* Content Top-Menu quer: Usually Admin Detail Pages */ #content .inside .content-topmenu { overflow: auto; list-style-type:none; padding:8px 6px 3px 8px; margin-bottom:1px; margin-left:15px; background-color:#f2f1ec; } /* Button-Area leicht grau + knapper Innenabstand */ #content .inside .content-topmenu li { float:left; overflow:hidden; border:1px solid #d9d1bf; border-radius:4px; margin:0 4px 4px 0; background-color:#fff; } /* jeder Button ein eigenes umrandetes weißes Kästchen; overflow:hidden clippt das innere auf die runden Ecken (sonst fehlen unten l/r Pixel) */ #content .inside .content-topmenu li.last { border-right:1px solid #d9d1bf; } #content .inside .content-topmenu a { text-decoration:none; color:#474746; display:block; padding:8px 12px 7px 10px; border-bottom:2px solid #fff;} #content .inside .content-topmenu i.fa { font-size:1.5em; } #content .inside .content-topmenu a:hover, #content .inside .content-topmenu .active { border-bottom:2px solid #aaa; text-decoration:none; } #content .inside .content-topmenu.small a { padding:4px 8px; } /* Inline Menu simple */ #content .inside .inline-menu { display:inline-block; padding:0; list-style-type:none; white-space:nowrap; } #content .inside .inline-menu li { margin-bottom:5px; background-color:var(--accent); border-radius:var(--radius-btn); } #content .inside .inline-menu li:hover { background-color:var(--accent-strong); } #content .inside .inline-menu a { display:block; padding:5px 5px 5px 5px; color:#fff; text-decoration:none; text-align:center; } #content .inside .inline-menu i { color:#fff; } /* Modifier statt Aenderung der Basisklasse: .inline-menu wird auch als schmales Einzel-Button-Menu genutzt (vermieten_integration.php mit fester width:200px) - das soll unangetastet bleiben. Hier: Buchen/Nachricht senden sollen die Breite der Sidebar (.bigright) ausfuellen statt nur wortbreit zu sein. */ #content .inside .inline-menu.inline-menu-full { display:block; width:100%; white-space:normal; } #content .inside .inline-menu.inline-menu-full a { padding-top:9px; padding-bottom:9px; font-weight:bold; } /* Sekundaer-Variante (Outline) fuer "Nachricht senden" in der Sidebar: derselbe Platz und dieselbe Groesse, nur ohne Fuellung. Unter 870px stehen die Spalten uebereinander, die Sidebar landet also direkt unter dem Formular - als gefuellte Flaeche ueber die ganze Breite zog die Nachricht dort mehr Blicke auf sich als "Weiter"/"Jetzt buchen" darueber. Die Nachricht ist der Nebenweg, nicht das Ziel der Strecke; Outline dreht die Reihenfolge zurueck, ohne den Weg zu verstecken. Gleiche Sprache wie .btn-ghost im Button-System. Das gefuellte "Buchen" auf der FeWo-Detailseite bleibt unberuehrt - dort ist es das Ziel. */ #content .inside .inline-menu.inline-menu-ghost li { background-color:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); } #content .inside .inline-menu.inline-menu-ghost li:hover { background-color:var(--accent-tint); } #content .inside .inline-menu.inline-menu-ghost a, #content .inside .inline-menu.inline-menu-ghost i { color:var(--accent); } #content .inside .inline-menu.inline-menu-ghost li:hover a, #content .inside .inline-menu.inline-menu-ghost li:hover i { color:var(--accent-strong); } /* Subscription colors and classes */ /* Gemeinsame Badge-Politur (überall): runde Ecken, Versalien, Laufweite. Farben/Rahmen s. unten. */ #content .inside .subscription-basic, #content .inside .subscription-premium, #content .inside .subscription-business { display:inline-block; border-radius:4px; font-weight:bold; font-size:0.85em; letter-spacing:0.4px; text-transform:uppercase; line-height:1.6; } #content .inside .subscription-basic { border:1px solid #03F; padding:1px 5px 1px 5px; color:#03F; background-color:#D5D6F7; } #content .inside .subscription-basic a, #content .inside .subscription-basic a:hover { text-decoration:none; color:#03F; } #content .inside .subscription-premium { border:1px solid #C00; padding:1px 5px 1px 5px; color:#C00; background-color:#FEE2E3; } #content .inside .subscription-premium a, #content .inside .subscription-premium a:hover { text-decoration:none; color:#C00; } #content .inside .subscription-business { border:1px solid #0B4; padding:1px 5px 1px 5px; color:#0B4; background-color:#E2FEE3; } #content .inside .subscription-business a, #content .inside .subscription-business a:hover { text-decoration:none; color:#0B4; } #content .inside .content { padding:25px 25px 10px 25px; margin-bottom:1px; background-color:#fff; display:block; } /* Warmup-Banner (Vermieter-Anmeldeseite): randlos bis an die Kanten der Content-Box (hebt deren 25px-Padding oben/seitlich per negativer Margin auf), mit Stift-Overlay unten rechts (Farbverlauf, weißer Ring, pulsierende Aura) als Anmelde-Signal. Mobil flacher/kleiner. */ #content .inside .content .register-banner { position:relative; overflow:hidden; width:calc(100% + 50px); height:180px; margin:-25px -25px 20px -25px; } #content .inside .content .register-banner img { display:block; width:100%; height:100%; object-fit:cover; object-position:20% center; } #content .inside .content .register-banner .register-banner-icon { position:absolute; right:100px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, #7bb8e6 0%, var(--accent) 100%); border:2px solid rgba(255,255,255,0.9); color:#fff; font-size:26px; box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 0 0 0 rgba(101,169,221,0.75); animation:registerBannerPulse 1.9s ease-out infinite; } @keyframes registerBannerPulse { 0% { box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 0 0 0 rgba(101,169,221,0.75); } 70% { box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 0 0 24px rgba(101,169,221,0); } 100% { box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 0 0 0 rgba(101,169,221,0); } } @media (prefers-reduced-motion: reduce) { #content .inside .content .register-banner .register-banner-icon { animation:none; } } @media (max-width:640px) { #content .inside .content .register-banner { height:100px; margin-bottom:14px; } #content .inside .content .register-banner .register-banner-icon { right:24px; width:46px; height:46px; font-size:20px; } } #content .inside .content.right { padding:0; width:220px; float:right; background-color:#fff; } #content .inside .content.midleft { min-width:300px; margin-right:221px; } /* Large sizes for fewo detail */ #content .inside .bigmidleft { width:821px; float:left; } #content .inside .bigright { padding:0; margin-left:822px; min-width:250px; background-color:#fff; } @media (max-width: 1070px) { #content .inside .bigmidleft { width:711px; } #content .inside .bigright { margin-left:712px; } } @media (max-width: 970px) { #content .inside .bigmidleft { width:601px; } #content .inside .bigright { margin-left:602px; } } @media (max-width: 870px) { #content .inside .bigmidleft { width:100%; clear:both; } #content .inside .bigright { width:100%; max-width:100%; margin-left:0px; clear:both;} } /* Buchen-Leiste, fest am unteren Bildschirmrand: nur unterhalb von 870px aktiv - genau der Breakpoint, ab dem .bigright unter .bigmidleft rutscht und der "Buchen"-Button dort erst hinter allen Objektdaten (Bilder, Beschreibung, Kalender) erscheint. Gleiche Bar-Optik wie .bottomnav (fixed, Schatten nach oben, safe-area-Padding), aber eigene Klasse: .bottomnav gehoert zum eingeloggten App-Bereich, diese Seite ist oeffentlich und ungefiltert erreichbar. */ .sd-book-bar { display:none; } @media (max-width: 870px) { .sd-book-bar { display:block; position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#fff; border-top:1px solid #d9d1bf; box-shadow:0 -2px 8px rgba(0,0,0,0.08); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); } .sd-book-bar a { display:block; background-color:var(--accent); color:#fff; text-decoration:none; text-align:center; font-weight:bold; padding:12px; border-radius:var(--radius-btn); } .sd-book-bar a:hover { background-color:var(--accent-strong); } .sd-book-bar i { margin-right:4px; } /* Platz fuer die fixe Bar, sonst verschwindet die letzte Content-Zeile dahinter. */ #content .inside:has(.sd-book-bar) { padding-bottom:70px; } } #content .inside .left { width:230px; float:left; } #content .inside .right { width:230px; float:right; } #content .inside .midright { margin-left:231px; } #content .inside .headerpart { min-height:0; overflow:hidden; padding-top:25px; padding-bottom:10px; } /* Titel-Block straffer: kein erzwungenes min-height, Float sauber eingefasst */ #content .inside .headerpart h1 { margin-top:0; margin-bottom:0; line-height:1.15; } #content .inside .headerpart .h1symbol { font-size:2.4em; } #content .inside .midleft { margin-right:231px; } #content .inside .content .btn_navigator { background:url("btn_navigator.svg") no-repeat left top; background-size: 34px 34px; padding-left:45px; padding-bottom:20px;} #content .inside .content .btn-list { max-width:840px; text-align:left; margin:10px 0px 20px 0px;} #content .inside .content .btn-list div { display:inline-block; min-width:360px; max-width:360px; margin-right:10px; vertical-align:top;} #content .inside .reloadbutton { margin:0 auto; text-align:center; width:66%; border:1px solid #d9d1bf; background-color:#ebebeb;} #content .inside .reloadbutton a { padding:10px; display:block; text-decoration:none; color:#333; } /* Portal-Startseite: gleiche Karten wie auf der Suchseite, 4 pro Reihe (responsiv) - Regeln dazu bei ".start-fewo-list .search-result-row" weiter unten, direkt neben der Karte. */ /* Preisinfo und Pakete */ #content .inside .content .subscription-list { max-width:840px; margin:10px 0px 20px 0px;} #content .inside .content .subscription-list .subscription { background-color:#eeeeee; border:1px solid #8c8c8c; border-radius:5px; display:inline-block; min-width:250px; max-width:250px; margin:15px 15px 0px 0px; vertical-align:top; } #content .inside .content .subscription-list .subscription div { padding:10px; } #content .inside .content .subscription-list .subscription .light { background-color:#fff; } /* Form alignment */ #content .inside form.defaultsize { max-width:450px; } #content .inside form div.form { display:inline-block; width:100%; padding-right:15px; margin-bottom:10px; } #content .inside form div.fullsize { max-width:100%; } #content .inside form div.fullsize input, #content .inside form div.fullsize select { display:inline-block; max-width:400px; } #content .inside form div.full { max-width:450px; } #content .inside form div.half { max-width:180px; } #content .inside form div.eindrittel { max-width:100px; } #content .inside form div.zweidrittel { max-width:285px; } #content .inside form div.inline { float:left; } #content .inside form { margin-bottom:15px; } @media (max-width: 640px) { /* "inline half" meint ueberall ein Paar, das nebeneinander gehoert (Anreise/Abreise, Von/Bis, PLZ/Ort ...). Bei festen 180px passen zwei unter ~380px nicht mehr und rutschen uebereinander. Halbe Breite + border-box (das padding-right zaehlt dann mit) haelt sie in einer Zeile. */ #content .inside form div.form.inline.half { width:50%; max-width:50%; box-sizing:border-box; } } #content .inside img.title { float:right; margin:-4px -10px 8px 10px; width:90px; border-radius:6px; } /* abgerundet, sauber am Header ausgerichtet */ /* Einheitlich geringere Abstände oben und rechts auf allen Bildschirmgrößen. */ @media (min-width: 901px) { #content .inside img.title { margin:-4px -10px 8px 10px; width:90px; } } @media (max-width: 900px) { #content .inside img.title { margin:-4px -10px 8px 10px; width:90px; } } #content .inside .input-size { font-size:0.9em; padding-top:8px; max-width:100%;} /* Fewo-Detail */ #content .inside .ort_breadcrump { background-color:#f5f5f5; padding:8px 0px 5px 10px; border-radius:5px; font-size:11pt;margin-bottom:10px; } /* .fewo-header (grosses 770er Bild + vier gefloatete Vorschaubilder) ist entfallen: Das Hauptbild ist jetzt das Kopfbild ueber die volle Breite (.fewo-hero-lg), die weiteren Aufnahmen stehen als Raster darunter (.fewo-gallery). */ #content .inside ul.overview { margin-bottom:20px; padding-left:0; box-sizing:border-box; } #content .inside ul.overview li { display:block; padding: 10px 15px; margin-bottom:-1px; border:1px solid #ddd; } #content .inside ul.overview li.first { border-top-right-radius:4px; border-top-left-radius:4px; } #content .inside ul.overview li.last { border-bottom-right-radius:4px; border-bottom-left-radius:4px; } #content .inside ul.overview li i { margin-right:13px; } #content .inside div.bingMaps-searchdetail { position:relative; width:100%; height:422px; margin-bottom:20px; } /* end Fewo-Detail */ #content .inside table.actionlist { margin-bottom:20px; } #content .inside .actionlist td { padding:10px; } #content .inside .image-list-entry { min-height:100px; margin-right:15px; margin-bottom:15px; } #content .inside .flex-list-entry { margin-right:15px; margin-bottom:15px; } #content .inside .fewo-list-entry { overflow:hidden; } /* Eintrag insgesamt sauber einfassen */ #content .inside .fewo-list-entry .fewo-list-top { overflow:hidden; } /* enthaelt den Bild-Float, damit der Abstand darunter ECHTER Weissraum ist (keine Clearance, die den margin auffrisst) */ #content .inside .fewo-list-entry img { float:left; } #content .inside .fewo-list-entry div.text { margin-left:110px; } #content .inside .fewo-list-entry div.text div { margin-bottom:10px; } #content .inside .fewo-list-entry div.text > div:last-child { margin-bottom:0; } /* kein Extra-Abstand unter dem letzten Block (v.a. Hinweisbox) -> alle Eintraege gleich */ /* Titelzeile: Name/ID/Freigabestatus links, Verwaisungs-Ampel rechtsbuendig. Feste Position fuer die Ampel = auf einen Blick erfassbar, ohne die Zeile absuchen zu muessen. */ #content .inside .fewo-list-entry .fewo-list-head { display:flex; align-items:center; gap:10px; } #content .inside .fewo-list-entry .fewo-list-head .fewo-list-title { flex:1 1 auto; min-width:0; } #content .inside .fewo-list-entry .fewo-list-head .fewo-state { flex:0 0 auto; margin-left:auto; } /* Button-Reihe: sitzt IMMER unter dem Bild (clear:both), sonst umfliesst sie den Bild-Float und klebt je nach Textlaenge an dessen Kante. Flex statt Float, damit der Aktions-Button per margin-left:auto nach rechts wandert. Abstand oben bewusst als PADDING, nicht als margin: bei clear:both wird ein margin-top von der Clearance geschluckt (dann klebt die Reihe am Bild) - padding nicht. */ #content .inside .fewo-list-entry .content-topmenu { clear:both; margin-left:0; margin-top:0; padding:12px 0 0 0; background:none; overflow:visible; display:flex; flex-wrap:wrap; align-items:center; } #content .inside .fewo-list-entry .content-topmenu li { float:none; } /* Freigeben/Sperren rechtsbuendig und als echter Button - nicht als weiteres Kaestchen der Pruef-Reihe, damit die Aktion nicht zwischen den Navigations-Buttons untergeht. */ #content .inside .fewo-list-entry .content-topmenu li.fewo-list-action { margin-left:auto; border:0; background:none; overflow:visible; } #content .inside .fewo-list-entry .content-topmenu li.fewo-list-action a.button { display:inline-block; padding:5px 16px; border-bottom:0; color:#fff; font-weight:bold; } #content .inside .fewo-list-entry .content-topmenu li.fewo-list-action a.button i.fa { font-size:1em; margin-right:4px; } /* Gruppenweises Ein-/Ausblenden beim Freigeben/Sperren (siehe change_status im head-Template) */ #content .inside .status-hidden { display:none !important; } /* Verwaisungs-Ampel in der Admin-Fewoliste. BEWUSST anders als die Subscription-Badges daneben: die sind eckig, hell hinterlegt und in Versalien - die Ampel ist eine satt gefuellte Pille mit Icon in normaler Schreibweise. So liest man auf einen Blick "Zustand" vs. "Tarif", ohne beides zu verwechseln. */ #content .inside .fewo-state { display:inline-block; border-radius:999px; padding:2px 10px 2px 8px; border:0; color:#fff; font-weight:bold; font-size:11px; line-height:1.5; white-space:nowrap; cursor:help; /* es haengt ein title mit der Begruendung dran */ } #content .inside .fewo-state i { margin-right:5px; font-size:11px; color:#fff; } #content .inside .fewo-state-ok { background-color:#3d8b3d; } /* buchbar bzw. startklar */ #content .inside .fewo-state-info { background-color:#2f80c6; } /* gueltiger Zustand: nur Anfrage */ #content .inside .fewo-state-warn { background-color:#b5710a; } /* Handlungsbedarf, aber nicht sperren */ #content .inside .fewo-state-crit { background-color:#c9302c; } /* Sperr-Kandidat */ #content .inside .fewo-state-mute { background-color:#8a857b; } /* gesperrt und verwaist: nichts zu tun */ /* Subscription-Badge in der Fewoliste auf Sidebar-Groesse: es begleitet die Kundennummer, soll sie aber nicht ueberstrahlen. */ #content .inside .fewo-list-entry .subscription-basic, #content .inside .fewo-list-entry .subscription-premium, #content .inside .fewo-list-entry .subscription-business { padding:1px 7px 0px 7px; font-size:10px; } #content .inside .content .image-holder { min-height:125px; border:1px dotted #aaa; margin:10px 0px 10px 0px;} #content .inside .content .image-holder img { max-height:100px; max-width:150px; padding:10px 0px 10px 10px; } #content .inside .content img.mikro { max-width:100px; margin:1px; } #content .inside .content .image-left { float:left; margin-right:20px; } #content .inside .content .section-left { float:left; margin-right:10px; font-size:1.5em; } #content .inside .content .button-right { float:right; margin:0px 0px 20px 20px; font-size:2em; cursor:pointer; } #content .inside .content .leftfloater { float:left; margin:0px 10px 10px 0px; } #content .inside .calendar { min-width:205px; max-width:210px; height:200px; float:left; margin:10px; } #content .inside .calendar .title { max-width:210px; text-align:left; text-transform:uppercase; border-bottom:2px solid #ddd; margin-bottom:5px; font-size:11pt; } #content .inside .calendar .weekday, #content .inside .calendar .day, #content .inside .calendar .noday { width:25px; float:left; padding:1px; margin:1px; text-align:left; font-size:10.5pt; line-height:18.5pt; } #content .inside .calendar .weekday { } #content .inside .calendar .day { cursor:pointer; border:none; color:#fff; border-radius:2px; opacity:1; text-align:center; } #content .inside .calendar .avail { background-color:#5cb85c; } #content .inside .calendar .noavail { background-color:#d9534f; } #content .inside .calendar .change { background-image: linear-gradient(135deg, #d9534f 0 44%, #5cb85c 45% 55%, #d9534f 56% 100%); } #content .inside .calendar .arrive { background-image: -ms-linear-gradient(right bottom,#d9534f 50%,#5cb85c 50%); background-image: -webkit-linear-gradient(right bottom,#d9534f 50%,#5cb85c 50%); background-image: -moz-linear-gradient(right bottom,#d9534f 50%,#5cb85c 50%); background-image: linear-gradient(135deg,#5cb85c 50%,#d9534f 50%); } #content .inside .calendar .depart { background-image: -ms-linear-gradient(right bottom,#5cb85c 50%,#d9534f 50%); background-image: -webkit-linear-gradient(right bottom,#5cb85c 50%,#d9534f 50%); background-image: -moz-linear-gradient(right bottom,#5cb85c 50%,#d9534f 50%); background-image: linear-gradient(135deg,#d9534f 50%,#5cb85c 50%); } #content .inside .calendar .highlight { opacity:0.5; } /* Just use opacity for highlighting */ /* Datepicker-Layouts to embed calendar */ /* Der Monats-Streifen scrollt NATIV horizontal (vorher overflow:hidden + Pfeil-Buttons, die scrollLeft gesetzt haben). Dadurch: Touch-Wischen auf dem Handy, Trackpad-Gesten und ein Scrollbalken als sichtbare Bedien-Andeutung auf dem Desktop - ohne eigenes Bedienelement. */ /* Vertikale Luft um den Streifen: der Scrollbalken ist ein Bedienelement und darf weder am Kalender kleben noch am naechsten Block anstossen. */ #content .inside .datepicker_across { overflow:visible; display:block; width:100%; max-width:760px; height:auto; border:0; margin:14px 0px 18px 0px; } /* Hoehe: Monatsraster ~220px + Scrollbalken 14px + ~28px Luft dazwischen. Der Balken soll nicht an den Tagesfeldern kleben, aber auch keine leere Flaeche darunter aufspannen. */ #content .inside .datepicker_across .part_calendar { width:100%; border:0; height:262px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; /* Momentum-Scrolling auf iOS */ scroll-behavior:smooth; scroll-snap-type:x proximity; /* Wischen landet auf Monatsgrenzen statt mittendrin */ /* Scrollbalken bewusst kraeftig: er ist auf dem Desktop das EINZIGE Bedienelement zum Blaettern (die Pfeil-Buttons sind entfallen) und muss daher sichtbar greifbar sein. */ scrollbar-width:auto; scrollbar-color:#b3aa96 #f0ece1; touch-action:pan-x; white-space:nowrap; } #content .inside .datepicker_across .part_calendar_inner { display:flex; flex-wrap:nowrap; align-items:flex-start; min-width:max-content; } #content .inside .datepicker_across .part_calendar .cal-month { flex:0 0 auto; margin-right:21px; scroll-snap-align:start; } /* Scrollbalken statt der frueheren Pfeil-Icons - kraeftig genug, um als Bedienelement erkannt und mit der Maus gegriffen zu werden. */ #content .inside .datepicker_across .part_calendar::-webkit-scrollbar { height:14px; } #content .inside .datepicker_across .part_calendar::-webkit-scrollbar-track { background:#f0ece1; border-radius:7px; } #content .inside .datepicker_across .part_calendar::-webkit-scrollbar-thumb { background:#b3aa96; border-radius:7px; border:3px solid #f0ece1; } #content .inside .datepicker_across .part_calendar::-webkit-scrollbar-thumb:hover { background:#9a9080; } /* Register vermieten */ #content .inside .register-steps { margin: 5px 0px 15px 25px; } #content .inside .register-steps div { display:inline; } #content .inside .register-steps div.left { float:left; width:50px; } /* FeWo-Kopfbild der Buchungsstrecke (module/booking_fewo_hero.php). Randlos bis an die Kanten der Content-Box, gleiches Muster wie .register-banner. Der Verlauf unten sichert die Lesbarkeit des Namens auf hellen wie dunklen Fotos. */ /* Der Hero steht immer allein in einer eigenen .content-Box. Deren Innenabstand hier auf 0: so fuellt das Bild die Box randlos aus, ohne den Negative-Margin-Trick von .register-banner - und darunter bleibt kein weisser Streifen stehen. */ #content .inside .content:has(> .fewo-hero) { padding:0; } #content .inside .content .fewo-hero { position:relative; overflow:hidden; width:100%; height:190px; margin:0; } #content .inside .content .fewo-hero a { display:block; width:100%; height:100%; text-decoration:none; } #content .inside .content .fewo-hero img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; } #content .inside .content .fewo-hero:after { content:''; position:absolute; left:0; right:0; bottom:0; height:60%; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); } /* Ohne Namensschild braucht es auch den Verlauf nicht - er ist nur da, damit weisse Schrift auf hellen Fotos lesbar bleibt. */ #content .inside .content .fewo-hero.fewo-hero-plain:after { display:none; } #content .inside .content .fewo-hero .fewo-hero-badge { position:absolute; left:22px; bottom:18px; z-index:1; max-width:calc(100% - 44px); color:#fff; font-size:1.5em; font-weight:bold; line-height:1.25; text-shadow:0 1px 3px rgba(0,0,0,.5); } /* Detailseite: dasselbe Kopfbild, nur hoeher - dort ist das Objekt das Thema der Seite und nicht die Erinnerung daran, was man gerade bucht. */ #content .inside .content .fewo-hero.fewo-hero-lg { height:340px; } @media (max-width: 640px) { #content .inside .content .fewo-hero { height:135px; } #content .inside .content .fewo-hero.fewo-hero-lg { height:200px; } #content .inside .content .fewo-hero .fewo-hero-badge { left:16px; bottom:12px; font-size:1.15em; max-width:calc(100% - 32px); } } /* Bilderleiste unter dem Kopfbild (FeWo-Detailseite). Gleich grosse Kacheln im Raster statt der frueheren vier gefloateten Bilder: die Reihe bleibt auch bei 5, 9 oder 11 Aufnahmen ruhig, und der Umbruch passiert von allein. */ /* Kein Top-Margin: die Kacheln sollen buendig mit dem Buchen-Button in der Sidebar (.bigright) abschliessen - beide stehen im gleichen Abstand (Content-Padding) unter dem Kopfbild. */ #content .inside .fewo-gallery { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:0px 0px 6px 0px; } #content .inside .fewo-gallery a { display:block; overflow:hidden; border-radius:var(--radius); } #content .inside .fewo-gallery img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; } #content .inside .fewo-gallery a:hover img { opacity:0.88; } /* Letzte Kachel als Hinweis auf den Rest: gleiche Groesse wie die Bilder, dunkel ueberblendet. Vorher war das ein kleiner Textlink rechts unter der Reihe - leicht zu uebersehen. */ #content .inside .fewo-gallery a.more { position:relative; } #content .inside .fewo-gallery .gallery-more { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); color:#fff; font-size:12px; line-height:1.2; text-align:center; } #content .inside .fewo-gallery .gallery-more b { font-size:1.9em; font-weight:bold; } /* Das Schild fuer die Mobilansicht haengt an Kachel 6 und ist auf dem Desktop unsichtbar. */ #content .inside .fewo-gallery .gallery-more-m { display:none; } @media (max-width: 640px) { /* Drei pro Reihe: die Kacheln bleiben gross genug, um etwas zu erkennen. Kachel 7 und 8 wuerden eine dritte, angebrochene Reihe beginnen - deshalb weg. Sie bleiben im HTML und damit in der Lightbox erreichbar. */ /* Auf Mobil gibt es keinen Buchen-Button daneben, an dem die Kacheln ausgerichtet werden muessten - etwas Luft zum Kopfbild bleibt daher, nur weniger als vorher. */ #content .inside .fewo-gallery { grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px; } #content .inside .fewo-gallery a:nth-child(n+7) { display:none; } #content .inside .fewo-gallery .gallery-more-m { display:flex; } #content .inside .fewo-gallery .gallery-more-d { display:none; } } /* Booking steps */ /* Fortschritts-Schritte der Buchungsstrecke. Flex statt Float: gleiche Optik auf Desktop, aber mobil umbrechen die Schritte gleichmaessig UND bleiben zentriert - mit Floats blieb die letzte Zeile linksbuendig haengen. */ #content .inside .booking-steps { margin-bottom:5px; } #content .inside .booking-steps ul { display:flex; flex-wrap:wrap; justify-content:center; margin:0 auto; max-width:840px; padding:10px; } #content .inside .booking-steps li { flex:0 0 130px; font-size:1.5em; list-style-type:none; padding:5px; text-align:center; } #content .inside .booking-steps li .desc { font-size:0.7em; display:block; } @media (max-width: 640px) { /* Genau 3 pro Reihe = 2 Zeilen bei 6 Schritten. Die Breite kommt aus dem Drittel, nicht mehr aus festen 130px - sonst passten nur 2 pro Reihe und es wurden 3 Zeilen. box-sizing:border-box ist hier WICHTIG: ohne das kaeme das padding auf die 33,333% obendrauf, drei Elemente ueberschritten 100% und es klappte auf 2 pro Reihe um. */ #content .inside .booking-steps ul { padding:6px 0; } #content .inside .booking-steps li { flex:0 0 33.333%; box-sizing:border-box; font-size:1.3em; padding:5px 2px; } } @media (max-width: 380px) { #content .inside .booking-steps li { font-size:1.05em; } } #content .inside .content .price { max-width:750px; margin:10px 0px 20px 0px; border-radius:4px; border:2px solid #474746; padding:10px; } #content .insice .booking-summara .theme { max-width:100%; } /* Reise-Karte (module/trip_summary.php) - gemeinsamer Anker auf FeWo-Detailseite UND in der Buchungsstrecke. Deshalb hier bei den geteilten Sidebar-Bausteinen und NICHT unter .booking-summary. Heller Rahmen statt Toenung: die getoente Flaeche ist fuer die Kontakt-Karte darunter reserviert, zwei gefaerbte Bloecke uebereinander wuerden um Aufmerksamkeit konkurrieren. */ #content .inside .trip-card { border:1px solid #e2ddd0; border-radius:var(--radius); padding:14px 16px; background:#fff; } /* Luft zu dem, was direkt folgt (Buchen-Button bzw. der Hinweis ohne Mietpreise). Nicht als margin-bottom an der Karte selbst: in der Buchungsstrecke folgt eine Trennlinie mit eigenem Abstand, dort kaeme die Luft doppelt. */ #content .inside .trip-card + ul.inline-menu, #content .inside .trip-card + .hint { margin-top:16px; } #content .inside .trip-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } /* Kicker statt h2: gleiche Typografie wie .owner-card-role - die Karte traegt sich ueber ihren Rahmen selbst und braucht keine Ueberschrift, die sie ankuendigt. */ #content .inside .trip-card-kicker { font-size:10px; font-weight:bold; letter-spacing:0.6px; text-transform:uppercase; color:#8a857b; line-height:1.4; } #content .inside .trip-card-status { font-size:10px; font-weight:bold; letter-spacing:0.3px; border-radius:999px; padding:2px 9px; white-space:nowrap; } #content .inside .trip-card-status.available { background:#eaf6ea; color:#3c7a3c; } #content .inside .trip-card-status.unavailable { background:#fdeceb; color:#a53c38; } #content .inside .trip-card-range { font-size:1.15em; font-weight:bold; line-height:1.35; color:#474746; } #content .inside .trip-card-range i { color:#b3aa96; margin:0 2px; } #content .inside .trip-card-meta { font-size:12px; color:#6f6a60; margin-top:2px; } #content .inside .trip-card-empty { color:#8a857b; } /* Preiszeile durch eine Haarlinie abgesetzt: sie kommt erst nach der Verfuegbarkeitspruefung dazu und ist eine Antwort auf die Angaben darueber, kein weiteres Detail derselben Art. */ #content .inside .trip-card-price { border-top:1px solid #efece3; margin-top:10px; padding-top:10px; } #content .inside .trip-card-price-value { display:block; font-size:1.3em; font-weight:bold; color:#474746; line-height:1.3; } #content .inside .trip-card-price-hint { display:block; font-size:11px; color:#8a857b; } #content .inside .trip-card-rebate { margin-top:8px; font-size:12px; color:#3c7a3c; } /* Sidebar-Bausteine der Buchungsstrecke UND der FeWo-Detailseite. Bewusst NICHT an .booking-summary gebunden: die Detailseite nutzt dieselbe Kontakt-Karte, damit der Vermieter dort nicht anders aussieht als zwei Klicks weiter in der Buchung. */ /* >>> ABSTAND "Nachricht senden" zum Block darueber: hier einstellen <<< */ #content .inside .summary-action { margin-top:14px; } /* Haupt-Aktion der Buchungsstrecke auf schmalen Fenstern ueber die volle Spaltenbreite ("Verfuegbarkeit pruefen", "Weiter", "Jetzt buchen"). Ab 870px stapeln sich die Spalten: der wortbreite Button stand dann als kleinstes Element ueber der vollbreiten Sidebar-Aktion, obwohl er der naechste Schritt ist. Groesse folgt hier der Wichtigkeit. Bewusst auf .bigmidleft begrenzt - das ist die Funnel-Spalte (Buchung, Nachricht, Detail), nicht jedes Formular der App. */ @media (max-width: 870px) { /* "Verfuegbarkeit pruefen" ist ein type="button" (kein Submit) - beide Zustaende desselben Button-Platzes muessen gleich breit sein, sonst springt das Layout beim Umschalten. */ #content .inside .bigmidleft form div.form input[type="submit"], #content .inside .bigmidleft form div.form input[type="button"] { width:100%; padding-top:11px; padding-bottom:11px; } } /* Kommentarfeld in Buchungsschritt 1: flacher als die Standard-70px, dafuer ueber die volle Spaltenbreite (der umgebende div nutzt "fullsize", nicht "full" - letzteres kappt bei 450px). */ #content .inside form div.fullsize #kommentar { height:48px; max-width:100%; } /* .summary-sep (Trennstrich ueber der Kontakt-Karte) ist entfallen: Reise- und Kontakt-Karte sind ueber Rahmen bzw. Toenung schon als eigene Bloecke lesbar, der Strich war einer zu viel. Den Abstand traegt jetzt die Karte selbst - und zwar auf beiden Seiten derselbe. */ /* Kompakte Kontakt-Karte nach Visitenkarten-Prinzip: kleines rundes Foto links, Kontaktdaten rechts daneben. Ersetzt das frueher 165px breite Foto, das die schmale Sidebar dominierte. Die leichte Toenung fasst Foto/Name/Telefon zu EINEM Block zusammen - das ersetzt die weggefallene h2-Ueberschrift als Gruppierung. */ #content .inside .owner-card { /* Traegt den Abstand zum Block darueber selbst - frueher stand dort ein Trennstrich. */ margin-top:26px; display:flex; align-items:center; gap:12px; background:var(--accent-tint); border-radius:var(--radius); padding:12px; } #content .inside .owner-card-body { min-width:0; } /* Kicker statt Ueberschrift: ordnet das Gesicht ein, ohne den Block zu dominieren. Gleiche Typografie wie die Badges (Versalien, gesperrt) = bekannte Bildsprache. */ #content .inside .owner-card-role { font-size:10px; font-weight:bold; letter-spacing:0.6px; text-transform:uppercase; color:#8a857b; line-height:1.4; } #content .inside .owner-card-name { font-weight:bold; line-height:1.3; } #content .inside .owner-card-phone { display:inline-block; margin-top:3px; color:var(--accent); text-decoration:none; white-space:nowrap; } #content .inside .owner-card-phone:hover { color:var(--accent-strong); text-decoration:underline; } #content .inside .content .booking-summary-complete {min-width:400px; max-width:770px; margin:20px 0px 25px 0px; border-radius:4px; padding:20px; } #content .inside .content .bsc-preview { background:#FFF2F2; border:2px solid #900; } #content .inside .content .bsc-booked { background:#E8FFE8; border:2px solid #090; } #content .inside .content .text-module { padding:10px; background:#fbfbfb; border:2px solid #CCC; border-radius:4px; max-width:790px; margin-bottom:15px;} /* Aufzählung Fakten Booking */ #content .inside ul.booking-facts { padding-left:0px; margin-bottom:10px; } #content .inside ul.booking-facts li { list-style-type:none; padding:5px; } /* WICHTIGE Downloads */ #content .inside ul.important-downloads { padding:5px; margin-bottom:10px; font-size:1.3em; } #content .inside ul.important-downloads li { list-style-type:none; padding:5px; } /* Wiederverwendbare Scroll-Box fuer breite Inhalte (Tabellen), die sonst ueber den Rand laufen. Greift nur, wenn es eng wird: auf breiten Fenstern ist sie unsichtbar. Gleicher kraeftiger Balken wie beim Monats-Kalender, damit er als Bedienelement auffaellt. */ #content .inside .table-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:auto; scrollbar-color:#b3aa96 #f0ece1; /* Wie beim Kalender: vertikale Luft, damit der Balken nicht am Inhalt darueber klebt und der naechste Block nicht direkt daran anstoesst. */ padding-bottom:12px; margin:14px 0px 26px 0px; } #content .inside .table-scroll::-webkit-scrollbar { height:14px; } #content .inside .table-scroll::-webkit-scrollbar-track { background:#f0ece1; border-radius:7px; } #content .inside .table-scroll::-webkit-scrollbar-thumb { background:#b3aa96; border-radius:7px; border:3px solid #f0ece1; } #content .inside .table-scroll::-webkit-scrollbar-thumb:hover { background:#9a9080; } /* min-width: unter ~420px wird die Tabelle unlesbar (60px Icon + Beschreibung + Preisspalte). Darunter scrollt die .table-scroll-Box horizontal, statt den Seitenrand zu sprengen. */ #content .inside table.booking-facts { margin-bottom:20px; max-width:760px; width:100%; min-width:420px; } #content .inside table.booking-facts td { min-height:35px; vertical-align:top; } #content .inside table.booking-facts td i.bigicon { font-size:30px; } #content .inside table.booking-facts td.last { min-width:100px; text-align:right; } #content .inside table.booking-facts td.first { width:60px; text-align:center; } #content .inside table.booking-facts input.editprice { max-width:50px; } #content .inside table.booking-facts select {min-width:50px; } #content .inside table.booking-facts-complete { margin-bottom:20px; max-width:760px; } #content .inside table.booking-facts-complete td { vertical-align:top; padding-bottom:10px;} #content .inside table.booking-facts-complete td.last { text-align:right; } /* Buchungs-/Rechnungs-Vorschau ist ein Dokument mit fester Spaltenlogik. Auf Mobil nicht stauchen, sondern die Box in ihrer Dokumentbreite lassen und den umgebenden Content-Block horizontal scrollbar machen (Viewer-Style). Zusätzlich ist Pinch-Zoom global aktiv – man kann also scrollen ODER zoomen. */ @media (max-width: 900px) { #content .inside .content:has(> .booking-summary-complete) { overflow-x:auto; -webkit-overflow-scrolling:touch; } #content .inside .content .booking-summary-complete { min-width:720px; } } /* Steht die Box in einer .table-scroll-Box (Buchungsschritt 5), scrollt sie selbst - dasselbe Muster wie die Extras-Tabelle in Schritt 1. Der Balken sitzt dann direkt unter der Box statt unter dem ganzen Block, und Ueberschrift, Hinweis und Formular bleiben beim Wischen stehen. Der Aussenabstand kommt in diesem Fall von der Scroll-Box, sonst zaehlt er doppelt. */ #content .inside .content .table-scroll > .booking-summary-complete { margin-top:0; margin-bottom:0; } /* All Tables */ #content .inside table { border-spacing: 0px; margin-bottom:15px; } #content .inside table.highlighter tr:hover, #content .inside table tr.second { background-color:#f9f9f9; margin:0;} #content .inside table td { padding:8px; vertical-align:top; } #content .inside table th { padding:8px; text-align:left; } /* Content Frontent tables / listings */ #content .inside .content table.fe-listing th { border-bottom:1px solid #ddd; } #content .inside .content table.fe-listing td { border-top:1px solid #ddd; } #content .inside table tr.pseudohighlight:nth-child(odd) { background-color: #eeeeee; } #footer { min-height:180px; flex-shrink:0; background-color:#333333; } #footer .inside { margin:0 auto; width:95%; max-width:1164px; padding:30px 0px 0px; font-size:10pt;line-height:15pt; color:#aeaeae; } #footer .inside a { transition: color .2s ease-in-out; text-decoration:none; color:#aeaeae; } #footer .inside a:hover { color:#fff; } #footer .inside .menu div.entry { width:19%; min-width:130px; float:left; } #footer .inside .menu div.logo { width:38%; min-width:320px; float:left; } #footer .inside .menu ul { padding-left:0; } #footer .inside .menu li { display:block; cursor:pointer; list-style-type:none;} #footer .inside .copyright { text-align:center; padding:15px; color:#aeaeae; font-size:9pt; line-height:29px; } /* Admin booking-overview entry page */ #content .inside .booking-overview { position:relative; display:block; overflow-x:auto; overflow-y:auto; white-space:nowrap; } #content .inside .booking-overview table { border-left:1px dotted #d9d1bf; } #content .inside .booking-overview table td, #content .inside .booking-overview table th { min-width:30px; width:30px; height:30px; padding:0; border-bottom:1px dotted #d9d1bf; border-right:1px dotted #d9d1bf; } #content .inside .booking-overview table td.legend { border-bottom:1px solid #d9d1bf; border-right:1px solid #d9d1bf; text-align:center; line-height:28px; font-size:10pt; font-size:10pt; background:#f7f6f2; } #content .inside .booking-overview table td.sa { background-color:#f3f3f3; } #content .inside .booking-overview table td.so { background-color:#ebebeb; } #content .inside .booking-overview .bar { font-size:10pt; line-height:18px; position:absolute; height:20px; padding-left:5px; border-radius:2px; overflow:hidden; } #content .inside .booking-overview .bar a { display:block; color:#fff; text-decoration:none; } #content .inside .booking-overview .blocking { background-color:#42a8fc; } #content .inside .booking-overview .external { background-color:#77d058; } #content .inside .booking-overview .regular-nook { background-color:#d9534f; } #content .inside .booking-overview .regular-ok { background-color:#5cb85c; } #content .inside .booking-overview .regular-nearlyok { background-color:#5cb0b8; } #content .inside .booking-overview .attention { background-color:#e3bf52; } #content .inside .booking-overview-legend { z-index:3; display:inline-block; position:absolute; left:0px; top:0px; } #content .inside .booking-overview-legend table { background:#f7f6f2; border:0; } #content .inside .booking-overview-legend table td, #content .inside .booking-overview-legend table th { height:30px; font-size:10pt; border-right:1px solid #d9d1bf; border-bottom:1px solid #d9d1bf; padding:0 8px 0 8px; line-height:29px; } /* Zi.- und Pe.-Spalten (2. und 3. Spalte) schlank halten: schmales Padding, zentriert, Minimalbreite – so bleibt die Legende schmaler und man sieht auf Mobil sofort mehr Kalender. */ #content .inside .booking-overview-legend table td:nth-child(2), #content .inside .booking-overview-legend table td:nth-child(3), #content .inside .booking-overview-legend table th:nth-child(2), #content .inside .booking-overview-legend table th:nth-child(3) { padding:0 3px; width:1%; text-align:center; white-space:nowrap; } #content .inside .booking-overview-togglebutton { z-index:2; background:#f7f6f2; padding-right:4px; display:inline-block; position:absolute; left:0px; top:0px; padding-left:8px; line-height:30px; font-size:12pt;} /* Responsive */ @media (max-width: 900px) { #footer .inside .menu div.logo { display:none; } #footer .inside .menu div.entry { width:33%; min-width:0; } #header .inside .menu .suche { display:none; } #content .inside .content .btn-list { max-width:400px; } #content .inside .content .btn-list div { min-width:80%; max-width:350px; } .theme-picture { height:340px; } #content .inside .menu .text { display:none; } #content .inside .menu .profile .text { display:none; } #content .inside .left { width:70px; float:left; } #content .inside .midright { margin-left:71px; } } /* Header: auf Handy Logo + Navigation stapeln statt horizontal überlaufen lassen. Zudem den (auf Theme-Seiten absoluten) Header in den normalen Fluss setzen, damit er nicht über dem Hero liegt und diesen verdeckt. Hero mobil flacher, Logo größer. Reihenfolge 640 -> 450, damit die Handy-Werte (kleinere Breite) gewinnen. */ @media (max-width: 640px) { #header.ontop { position:static; } #header .inside .menu { display:block; padding:0; } /* Handy: zurück zum Stapeln (kein Flex-Row) */ #header .inside .menu > div { float:none !important; text-align:center; line-height:normal !important; padding:6px 10px !important; } #header .inside .menu > div:first-child img { width:180px !important; height:auto !important; } #header .inside .menu > div:first-child a { display:inline-block; } #header .inside .menu nobr { white-space:normal; } .theme-picture { height:190px; background-position:60% 42%; } .theme-picture img { right:6%; width:56%; max-width:300px; } } @media (max-width: 450px) { .theme-picture { height:160px; background-size:180% auto; background-position:34% 45%; } .theme-picture img { right:4%; width:52%; max-width:215px; } } /* ===== Runder Avatar mit Initialen-Fallback (wiederverwendbar) ===== */ .avatar { position:relative; display:inline-block; width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--accent); flex:0 0 auto; } .avatar .avatar-initials { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:17px; text-transform:uppercase; } .avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .avatar.avatar-sm { width:36px; height:36px; } .avatar.avatar-sm .avatar-initials { font-size:14px; } .avatar.avatar-lg { width:64px; height:64px; } .avatar.avatar-lg .avatar-initials { font-size:22px; } /* ===== Mobile Bottom-Tab-Bar (Vermieter / Mein Account / Admin) ===== */ /* Standard: unsichtbar – nur auf schmalen Viewports aktiv. */ .bottomnav, .bottomnav-sheet { display:none; } @media (max-width: 900px) { /* App-Look-Bereiche erkennen wir am Nav-Menü in der Sidebar (.menu.border-left gibt es nur dort: Vermieter/Account/Admin). Das ist robust – unabhängig davon, wo die fixe Bar im DOM landet. */ /* Alte Icon-Sidebar ausblenden, Content volle Breite. */ #content .inside:has(.menu.border-left) > .left { display:none; } #content .inside:has(.menu.border-left) .midright { margin-left:0; } /* App-Look auf Mobil: Der große Link-Footer ist ein Desktop-Konzept und auf Mobil dreifach doppelt (Navigation steckt in Bar + "Mehr"-Sheet + Header). Also Footer ausblenden – der weiße Content-Bereich füllt per Basis-Sticky-Fill sauber bis zur Bar. Pflicht-Links (Impressum/ Datenschutz/AGB) liegen im "Mehr"-Sheet. */ body:has(.menu.border-left) #footer { display:none; } /* Header-Unterlinie: auf App-Seiten fehlt sie NUR auf Mobil (auf dem Desktop ist sie bereits da). Daher ausschließlich hier im Mobil-Scope ergänzen, sonst gäbe es auf dem Desktop eine doppelte Linie. */ body:has(.menu.border-left) #header { border-bottom:1px solid #d9d1bf; } /* Platz für die fixe Bar, damit die letzte Content-Zeile nicht dahinter verschwindet. .inside weiß hinterlegen, damit unter dem Inhalt kein beiger Body-Hintergrund durchscheint – auch auf Seiten, die mit versteckten Hilfs-Formularen enden (z.B. Buchungsdetail), wo die "letzte Box füllt bis unten"-Regel nicht greift. Box-Trenner via Border erhalten. */ #content .inside:has(.menu.border-left) { padding-bottom:56px; background:#fff; } #content .inside:has(.menu.border-left) .content + .content { border-top:1px solid #d9d1bf; } .bottomnav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#fff; border-top:1px solid #d9d1bf; box-shadow:0 -2px 8px rgba(0,0,0,0.08); padding-bottom:env(safe-area-inset-bottom); } .bottomnav-item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 2px 7px; background:none; border:0; cursor:pointer; color:#777; text-decoration:none; font-size:11px; font-family:inherit; line-height:1.2; border-top:3px solid transparent; } .bottomnav-item i { font-size:19px; line-height:1; } .bottomnav-item span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bottomnav-item.active { color:var(--accent); border-top-color:var(--accent); } /* Sheet mit allen Menüpunkten */ .bottomnav-sheet.open { display:block; } .bottomnav-sheet-backdrop { position:fixed; inset:0; z-index:1001; background:rgba(0,0,0,0.4); } .bottomnav-sheet-panel { position:fixed; left:0; right:0; bottom:0; z-index:1002; background:#fff; border-top-left-radius:14px; border-top-right-radius:14px; padding:0 0 env(safe-area-inset-bottom); max-height:72vh; overflow-y:auto; box-shadow:0 -4px 16px rgba(0,0,0,0.2); } .bottomnav-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; } .bottomnav-user { display:flex; align-items:center; gap:8px; min-width:0; } .bottomnav-user-name { font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; } /* Subscription-Badge im Sheet: kleiner und dezenter als die Desktop-Sidebar-Variante. */ .bottomnav-badge { flex:0 0 auto; font-size:9px; font-weight:bold; letter-spacing:0.3px; text-transform:uppercase; line-height:1.5; padding:0 5px; border-radius:3px; border:1px solid; } .bottomnav-badge.subscription-basic { color:#03F; border-color:#03F; background:#D5D6F7; } .bottomnav-badge.subscription-premium { color:#C00; border-color:#C00; background:#FEE2E3; } .bottomnav-badge.subscription-business { color:#0B4; border-color:#0B4; background:#E2FEE3; } .bottomnav-sheet-close { background:none; border:0; font-size:28px; line-height:1; color:#999; cursor:pointer; padding:0 4px; } .bottomnav-sheet-panel ul { list-style:none; margin:0; padding:6px 0; } .bottomnav-sheet-panel li a { display:flex; align-items:center; gap:14px; padding:14px 18px; color:#474746; text-decoration:none; font-size:16px; } .bottomnav-sheet-panel li a i { font-size:18px; color:#777; width:22px; text-align:center; } .bottomnav-sheet-panel li a.active { color:var(--accent); font-weight:bold; } .bottomnav-sheet-panel li a.active i { color:var(--accent); } /* Pflicht-/Zusatz-Links (Impressum etc.) unten im Sheet – dezent, da der Footer auf Mobil aus ist. */ .bottomnav-sheet-legal { display:flex; flex-wrap:wrap; gap:6px 18px; padding:14px 18px 18px; border-top:1px solid #eee; } .bottomnav-sheet-legal a { color:#888; text-decoration:none; font-size:13px; } } /* ===== Startseite: dezentere Überschriften ===== */ #content .inside .content h1.start-headline, #content .inside .content h2.start-headline { font-weight: 400; margin-bottom: 10px; } /* SEO-H1 (beide Zielgruppen) etwas kompakter + Subline, damit sich die Suchbox darunter abhebt */ #content .inside .content h1.start-headline { max-width: 760px; margin: 0 auto 8px; line-height: 1.2; } /* Abschnitts-Überschriften brauchen Luft NACH OBEN (der Abstand nach unten zu den Karten bleibt eng). */ #content .inside .content h2.start-headline { margin-top: 42px; } .start-subline { max-width: 620px; margin: 0 auto 22px; color: #6f7b86; font-size: 1.1em; line-height: 1.45; } @media (max-width: 640px) { #content .inside .content h1.start-headline { font-size: 1.55em; } .start-subline { font-size: .98em; margin-bottom: 16px; } } /* ===== Startseite: Service-Bereich = flacher Hero (Foto wie Header) + echter CTA-Button, alles auf Weiß ===== Liegt im weißen .content-Block. Foto per background cover oben/unten beschnitten (flacher). */ /* Randlos ueber die volle Breite der Content-Box - gleiches Muster wie .register-banner und das FeWo-Kopfbild: die 25px Innenabstand werden per negativer Margin aufgehoben. Ein Foto, das links und rechts vor der Kante haltmacht, wirkt wie ein eingesetztes Bild; ueber die ganze Breite wird es zum Abschnitt. */ .service-hero { position:relative; height:300px; overflow:hidden; margin:22px -25px 0px -25px; width:calc(100% + 50px); background:#d9d1bf url("/img/theme.jpg") no-repeat center 42%; background-size:cover; } .service-hero img { position:absolute; right:7%; top:50%; transform:translateY(-50%); width:420px; max-width:44%; } .service-cta-below { text-align:center; padding:44px 16px 50px; } .service-cta-text { display:block; margin-bottom:14px; font-size:1.4em; color:#3a3a38; } .service-cta-btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:11px 28px; border-radius:var(--radius-btn); font-size:1.1em; } .service-cta-btn:hover { background:var(--accent-strong); color:#fff; } @media (max-width: 640px) { .service-hero { height:200px; } .service-hero img { right:5%; width:200px; max-width:52%; } .service-cta-text { font-size:1.2em; } } /* ===== Suchbox (Startseite + Ergebnisseite /suche) ===== Bewusst kühles, eigenständiges Design (weiße "Pille" mit blauem Akzent), das sich vom warmen Beige der übrigen Seite abhebt. Anreise/Abreise sind zu einem Zeitraum-Feld mit Popup-Kalender zusammengefasst. Layout: eine verbundene Zeile auf Desktop, kompakte Karte auf Mobil. */ .search-box { display: flex; align-items: stretch; gap: 0; background: #ffffff; border: 1px solid #e5edf4; border-radius: 999px; padding: 5px 5px 5px 7px; max-width: 860px; margin: 16px auto 22px; box-shadow: var(--shadow-card); } .search-box-field { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; padding: 5px 20px; border-radius: 16px; transition: background .12s ease; } .search-box-field.search-box-ziel { flex: 1.35 1 auto; } .search-box-field.search-box-range { flex: 1.7 1 auto; } .search-box-field.search-box-pers { flex: 0.8 1 auto; } .search-box-range, .search-box-pers { border-left: 1px solid #dde6ef; } .search-box-field.search-box-submit { flex: 0 0 auto; padding: 0; border-radius: var(--radius-btn); } .search-box-field:not(.search-box-submit):hover, .search-box-field:not(.search-box-submit):focus-within { background: #eef6fe; } .search-box-field label { font-size: 8.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; cursor: pointer; } .search-box-field input[type=text], .search-box-field select, .search-range-trigger { border: none; background: transparent; padding: 0; margin: 0; font-family: inherit; font-size: 12pt; font-weight: 500; color: #14212d; width: 100%; box-sizing: border-box; outline: none; height: 22px; line-height: 22px; } .search-box-field input[type=text]::placeholder { color: #7c8a98; font-weight: 500; } .search-box-field select { cursor: pointer; } /* Einheitliche Icon-Zeile für Ziel, Zeitraum und Personen */ .search-box-control { display: flex; align-items: center; gap: 9px; } .search-box-control > i { color: var(--accent); font-size: 12pt; flex: 0 0 auto; width: 15px; text-align: center; } .search-box-control > input, .search-box-control > select { flex: 1 1 auto; min-width: 0; width: auto; } .search-range-trigger { text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; } .search-range-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .search-range-text.is-placeholder { color: #7c8a98; font-weight: 500; } .search-box-submit button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 46px; padding: 0 30px; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); color: #ffffff; border: none; border-radius: var(--radius-btn); font-size: 12pt; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 12px rgba(47,128,198,.35); transition: filter .12s ease, transform .12s ease; } .search-box-submit button:hover { filter: brightness(1.06); transform: translateY(-1px); } /* Zeitraum-Popup – linksbündig am Feld verankert, damit es nicht über den rechten Rand läuft. */ .search-box-range { position: relative; } .search-range-pop { position: absolute; top: calc(100% + 14px); left: 0; z-index: 1300; background: #fff; border: 1px solid #e5edf4; border-radius: 18px; box-shadow: 0 16px 48px rgba(20,45,75,.22); padding: 10px 12px 10px; } .search-range-pop[hidden] { display: none; } /* Datepicker im Popup: schlanker, mit Range-Markierung (Klassen aus beforeShowDay) */ /* WICHTIG: jQuery UI bemisst den ganzen Datepicker in em (Container 34.8em, Gruppen 50%, Tabelle 95%). Größe daher ZENTRAL über font-size steuern und die Proportionen skalieren lassen – NICHT mit px-Zellen gegen die em-Breiten kämpfen (das streckt die Spalten und stapelt bei großer Schrift die Monate). */ #search_range_cal .ui-datepicker { font-size: 14px; width: auto !important; border: none; padding: 0; margin: 0; background: transparent; font-family: inherit; } /* Monate untereinander; Container + Gruppen schrumpfen auf Monatsbreite (kein rechter Leerraum). */ #search_range_cal .ui-datepicker-multi { width: auto !important; } #search_range_cal .ui-datepicker-group { float: none !important; display: block; width: auto !important; padding: 0; } #search_range_cal .ui-datepicker-header { position: relative; background: transparent; border: none; font-weight: 600; color: #22323f; } /* Vor/Zurück-Blättern: sichtbare, klickbare Chevrons (jQuery-UI-Sprite ersetzt) – man muss über die zwei Startmonate hinaus in die Zukunft navigieren können (spätere Reisetermine). */ #search_range_cal .ui-datepicker-prev, #search_range_cal .ui-datepicker-next { top: 0; width: 30px; height: 30px; border: none !important; background: transparent; border-radius: 50%; cursor: pointer; } #search_range_cal .ui-datepicker-prev-hover, #search_range_cal .ui-datepicker-next-hover { top: 0; border: none !important; background: var(--accent-tint); } #search_range_cal .ui-datepicker-prev .ui-icon, #search_range_cal .ui-datepicker-next .ui-icon { display: none; } #search_range_cal .ui-datepicker-prev::after, #search_range_cal .ui-datepicker-next::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); } #search_range_cal .ui-datepicker-prev::after { transform: translate(-30%, -50%) rotate(-135deg); } #search_range_cal .ui-datepicker-next::after { transform: translate(-70%, -50%) rotate(45deg); } #search_range_cal .ui-datepicker-prev.ui-state-disabled { cursor: default; } #search_range_cal .ui-datepicker-prev.ui-state-disabled::after { border-color: #cdd7e0; } #search_range_cal th { color: #98a5b2; font-weight: 600; padding: 4px 0; } #search_range_cal .ui-datepicker-calendar { border-collapse: collapse; width: auto; margin: 0; } #search_range_cal td { padding: 1px 0; text-align: center; } /* Tag als runder Chip; Größe in em, damit er mit der zentralen font-size mitskaliert. */ #search_range_cal td a, #search_range_cal td span { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 2.15em; height: 2.15em; padding: 0; margin: 0; border: none !important; background: transparent !important; color: #35434f !important; border-radius: 50%; } #search_range_cal td a:hover { background: var(--accent-tint) !important; } /* Durchgehendes Band: die Tönung liegt lückenlos auf der Zelle, nicht auf dem Tag. */ #search_range_cal td.dp-range-mid { background: var(--accent-tint); } #search_range_cal td.dp-range-mid a { color: var(--accent-strong) !important; } /* Start/Ende: Zelle halbseitig getönt (Übergang ins Band), Tag als voller Akzent-Kreis. */ #search_range_cal td.dp-range-start { background: linear-gradient(to right, #fff 50%, var(--accent-tint) 50%); } #search_range_cal td.dp-range-end { background: linear-gradient(to right, var(--accent-tint) 50%, #fff 50%); } #search_range_cal td.dp-range-start a, #search_range_cal td.dp-range-end a, #search_range_cal td.dp-range-solo a { background: var(--accent) !important; color: #fff !important; } /* Weiche Kappen an den Zeilen-Enden des Bandes (Wochenumbruch links/rechts abrunden). */ #search_range_cal tr td.dp-range-mid:first-child, #search_range_cal tr td.dp-range-start:first-child, #search_range_cal tr td.dp-range-end:first-child { border-radius: 16px 0 0 16px; } #search_range_cal tr td.dp-range-mid:last-child, #search_range_cal tr td.dp-range-start:last-child, #search_range_cal tr td.dp-range-end:last-child { border-radius: 0 16px 16px 0; } @media (max-width: 640px) { /* Kompakte Karte statt Pille – deutlich flacher als vier volle Felder untereinander */ .search-box { flex-wrap: wrap; gap: 8px; border-radius: 18px; padding: 12px; box-shadow: 0 6px 22px rgba(28,58,92,.16); } .search-box-field { flex: 1 1 100%; padding: 9px 12px; border: 1px solid #e9eef3; border-radius: 12px; background: #fbfcff; } .search-box-range, .search-box-pers { border-left: 1px solid #e9eef3; } .search-box-field.search-box-range { flex: 1 1 56%; } .search-box-field.search-box-pers { flex: 1 1 30%; } .search-box-field.search-box-submit { flex: 1 1 100%; padding: 0; border: none; background: transparent; } .search-box-submit button { width: 100%; min-height: 48px; border-radius: var(--radius-btn); } /* Kalender-Popup als sauber zentrierter Overlay (NICHT top:auto – das platziert fixed-Elemente undefiniert). Auf die Viewport-Größe begrenzt und bei Bedarf scrollbar. */ .search-range-pop { position: fixed; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: auto; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow: auto; padding: 12px; } /* Ein Monat, größere Tage für Touch */ #search_range_cal .ui-datepicker { font-size: 14px; } } /* ===== Ferienwohnungs-Karten (Suchergebnisse + Startseite) ===== */ /* Suchergebnisse: Zeilen-Karten untereinander (Standard-Suchlayout, nicht das Startseiten-Grid) */ .search-results { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; } /* cursor:pointer, weil die ganze Zeile zur Wohnung fuehrt (siehe search.head.php) - der Klick soll dort landen, wo auch "Ansehen" hinfuehrt. */ .search-result-row { display: flex; border: 1px solid #d9d1bf; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 12px; cursor: pointer; } .search-result-row .srr-media { flex: 0 0 170px; width: 170px; min-width: 170px; max-width: 170px; overflow: hidden; } .search-result-row .srr-media img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; object-position: center center; display: block; } .search-result-row .srr-body { flex: 1 1 auto; min-width: 0; padding: 14px 16px; } .search-result-row .srr-name { font-weight: bold; font-size: 13pt; overflow: hidden; } .search-result-row .srr-name a { color: #474746; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; } .search-result-row .srr-name a:hover { text-decoration: underline; } .search-result-row .srr-meta { color: #6f6a61; font-size: 10pt; margin-top: 4px; } .search-result-row .srr-pers { color: #8a857b; font-size: 9.5pt; margin-top: 4px; } .search-result-row .srr-mode { margin-top: 8px; font-size: 10pt; font-weight: bold; } .search-result-row .srr-mode.instant { color: var(--accent); } .search-result-row .srr-mode.request { color: #6f6a61; } .search-result-row .srr-mode i { margin-right: 5px; } .search-result-row .srr-note { margin-top: 8px; padding: 6px 8px; border-radius: 4px; background: #fbf3dd; color: #8a6d1e; font-size: 9pt; line-height: 1.35; } .search-result-row .srr-note i { margin-right: 4px; } /* Kleiner Nebenweg zur Karte. Vorher oeffnete ein Klick irgendwo in die Zeile die Karte - das ueberrascht, wo die Zeile aussieht wie eine Wohnung, die man ansehen will. Jetzt fuehrt die Zeile zur Wohnung, und die Karte hat ihren eigenen, leisen Link. */ .search-result-row .srr-map { display: inline-block; margin-top: 8px; font-size: 9.5pt; color: var(--accent); text-decoration: none; } .search-result-row .srr-map:hover { text-decoration: underline; } .search-result-row .srr-map i { margin-right: 4px; } .search-result-row .srr-side { flex: 0 0 140px; border-left: 1px solid #ece7da; padding: 12px 12px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; } .search-result-row .srr-price { font-size: 16pt; font-weight: bold; color: #474746; line-height: 1.2; } .search-result-row .srr-price .srr-ab { font-size: 9.5pt; font-weight: normal; color: #8a857b; } /* Wohnung ohne hinterlegten Mietpreis: steht an derselben Stelle wie der Preis, aber kleiner und ohne dessen Gewicht - es ist keine Zahl, die man vergleichen kann. */ .search-result-row .srr-price .srr-onrequest { font-size: 12pt; color: #6f6a61; } .search-result-row .srr-price small { display: block; font-size: 8.5pt; font-weight: normal; color: #8a857b; margin-top: 2px; } .search-result-row .srr-deposit { margin-top: 6px; font-size: 8.5pt; color: #8a857b; } .search-result-row .srr-cta { display: inline-block; margin-top: 12px; padding: 8px 16px; background: var(--accent); color: #fff; border-radius: var(--radius-btn); font-weight: bold; text-decoration: none; white-space: nowrap; } .search-result-row .srr-cta:hover { background: #337ab7; color: #fff; } .search-result-row.map-result-active { background: #f0f8ff; border-color: var(--accent); } .search-result-row.map-result-active .srr-name a, .search-result-row.map-result-active .srr-price { color: #17458d; } /* Unter 640px stapelt sich die Zeile von selbst (Bild oben, Fusszeile darunter). Die Klasse ".srr-stacked" erzwingt genau diese Form unabhaengig von der Fensterbreite - so nutzt die Startseite dieselbe Karte als Kachel, mehrere nebeneinander (siehe startseite.php). Die Regeln hier sind deshalb identisch zur @media-Regel darunter, nur ohne deren Bedingung. */ .search-result-row.srr-stacked { flex-direction: column; } .search-result-row.srr-stacked .srr-media { flex-basis: auto; width: auto; min-width: 0; max-width: none; } .search-result-row.srr-stacked .srr-media img { min-height: 0; aspect-ratio: 16 / 9; } .search-result-row.srr-stacked .srr-side { flex-basis: auto; border-left: none; border-top: 1px solid #ece7da; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .search-result-row.srr-stacked .srr-cta { margin-top: 0; } @media (max-width: 640px) { .search-result-row { flex-direction: column; } /* Nicht nur flex-basis zuruecksetzen: die feste Breite der Desktop-Spalte (170px) blieb sonst stehen und das Foto stand als Briefmarke links in einer leeren weissen Zeile. */ .search-result-row .srr-media { flex-basis: auto; width: auto; min-width: 0; max-width: none; } .search-result-row .srr-media img { min-height: 0; aspect-ratio: 16 / 9; } .search-result-row .srr-side { flex-basis: auto; border-left: none; border-top: 1px solid #ece7da; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .search-result-row .srr-cta { margin-top: 0; } } /* ===== Ferienwohnungs-Kacheln (Startseite) ===== Gleiche Karte wie im Suchergebnis (.srr-stacked, s.o.), nur mehrere nebeneinander statt untereinander gestapelt - und mit fester Breite statt voller Zeilenbreite. */ #content .inside .content .start-fewo-list { align-items: stretch; margin-top: 12px; } #content .inside .content .start-fewo-list .search-result-row { width: 23.5%; max-width: 280px; margin: 6px 0.6% 18px; } @media (max-width: 640px) { #content .inside .content .start-fewo-list { justify-content: center; } #content .inside .content .start-fewo-list .search-result-row { width: 46%; } } @media (max-width: 460px) { #content .inside .content .start-fewo-list .search-result-row { width: 100%; max-width: none; margin: 6px 0 16px; } } /* Zwischenbreiten (etwa Browserfenster halber Bildschirmbreite): 4 Kacheln nebeneinander werden hier so schmal, dass Preis und "Ansehen"-Knopf in der Fusszeile umbrechen - gemessen ab ca. 1000px Fensterbreite abwaerts. Statt einer eigenen Zwischenstufe im responsiven Raster wird hier nur die vierte Kachel ausgeblendet und die restlichen drei ziehen sich breiter: eine Zeile bleibt eine Zeile, nur mit einer Wohnung weniger. Ab 1100px sind vier Kacheln wieder komfortabel breit (siehe Standardregel oben). */ @media (min-width: 641px) and (max-width: 1099px) { #content .inside .content .start-fewo-list .search-result-row { width: 31.3%; max-width: none; } #content .inside .content .start-fewo-list .search-result-row:nth-child(4) { display: none; } } /* ===== Suche: Umschalter Liste/Karte + Kartenansicht ===== */ /* Volle Karte ist ausgeblendet, bis die Vorschau angeklickt wird (.show-map). */ .search-map-wrap { display: none; position: relative; } .search-layout.show-map .search-map-wrap { display: block; height: 100%; } #search-map { width: 100%; height: calc(100vh - 24px); min-height: 340px; border: 1px solid #d9d1bf; border-radius: 6px; overflow: hidden; color: #8a857b; } /* "Karte schließen" – nur in der Karten-Ansicht sichtbar, liegt auf der Karte (oben links, damit die Azure-Zoom-Steuerung oben rechts frei bleibt). */ .search-map-close { position: absolute; top: 12px; left: 12px; z-index: 5; background: #fff; color: #474746; border: 1px solid #d9d1bf; border-radius: var(--radius-btn); padding: 8px 14px; font-weight: bold; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.25); } .search-map-close i { margin-right: 5px; } /* Booking-artige Vorschau-Karte in der rechten Spalte (Liste-Ansicht); ::after fängt den Klick ab. */ .search-map-preview { position: relative; height: 260px; border: 1px solid #d9d1bf; border-radius: 6px; overflow: hidden; cursor: pointer; } .search-map-preview-mini { width: 100%; height: 100%; } .search-map-preview::after { content: ''; position: absolute; inset: 0; z-index: 2; } .search-map-preview-cta { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; background: #fff; color: var(--accent); font-weight: bold; font-size: 9.5pt; padding: 7px 15px; border-radius: 20px; box-shadow: 0 1px 5px rgba(0,0,0,.3); white-space: nowrap; pointer-events: none; } .search-map-preview-cta i { margin-right: 5px; } .search-layout.show-map .search-map-preview { display: none; } .map-preview-dot { width: 12px; height: 12px; background: var(--accent); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.4); } /* --- Kartenansicht = Vollbild-Overlay (Booking-Stil): gilt in ALLEN Breiten, sobald die Karte offen ist. --- */ .search-layout.show-map { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; gap: 0; background: #fff; display: flex; align-items: stretch; } .search-layout.show-map .search-aside { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; position: static; } .search-layout.show-map #search-map { height: 100%; min-height: 0; border: none; border-radius: 0; } /* Body-Scroll sperren, solange die Vollbild-Karte offen ist (Klasse wird per JS gesetzt). */ body.efewo-map-open { overflow: hidden; } @media (min-width: 641px) { /* Liste-Ansicht: Ergebnisse links (breit), Karten-Vorschau als Spalte rechts (sticky). */ .search-layout { display: flex; gap: 18px; align-items: flex-start; } .search-layout .search-results { flex: 1 1 auto; min-width: 0; } .search-layout .search-aside { flex: 0 0 250px; position: sticky; top: 12px; } /* Karten-Ansicht: Liste als eigene Scroll-Spalte links (volle Höhe), Karte füllt den Rest. */ .search-layout.show-map .search-results { display: block; flex: 0 0 460px; width: 460px; height: 100%; max-height: none; margin: 0; overflow-y: auto !important; overflow-x: hidden; box-sizing: border-box; padding: 16px 14px 16px 16px; background: #fff; border-right: 1px solid #e2dccc; box-shadow: 2px 0 8px rgba(0,0,0,.06); position: static; z-index: 2; } /* Schmale Liste: Inhalte dürfen umbrechen, damit die Spalte nicht horizontal abgeschnitten wird. */ .search-layout.show-map .search-result-row { flex-wrap: wrap; } .search-layout.show-map .search-result-row .srr-media { flex: 0 0 180px; width: 180px; min-width: 180px; max-width: 180px; } /* Basis 0, damit ein langer Titel den Body nicht unter das Bild drückt (Umbruch-Basis = Bild + 0). */ .search-layout.show-map .search-result-row .srr-body { flex: 1 1 0; min-width: 0; } .search-layout.show-map .search-result-row .srr-media img { min-height: 140px; } .search-layout.show-map .search-result-row .srr-side { flex: 1 1 100%; border-left: none; border-top: 1px solid #ece7da; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .search-layout.show-map .search-result-row .srr-cta { margin-top: 0; } } @media (max-width: 640px) { /* Mobil: Vorschau oben, darunter die Ergebnisse; in der Karten-Ansicht nur die Karte (Vollbild). */ .search-layout { display: flex; flex-direction: column; } .search-layout .search-aside { order: -1; margin-bottom: 16px; } .search-map-preview { height: 180px; } .search-layout.show-map .search-results { display: none; } .search-layout.show-map .search-aside { order: 0; flex: 1 1 auto; height: 100%; } } /* Preis-Bubble als Karten-Marker */ .map-price-bubble { background: var(--accent); color: #fff; font-weight: bold; font-size: 9pt; padding: 3px 9px; border-radius: 13px; white-space: nowrap; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); } /* Wohnungen ohne Preis treten auch farblich zurueck - sie liegen ohnehin hinter den Preis-Markern (Einfuegereihenfolge, s. search.head.php). Bewusst VOR der Aktiv-Regel: gleiche Spezifitaet, die spaetere gewinnt - so bleibt ein angeklickter Anfrage-Marker trotzdem als aktiv erkennbar. */ .map-price-bubble.map-marker-onrequest { background: #8d9aa6; } .map-price-bubble.map-marker-active { background: #2557a1; border-color: rgba(255,255,255,.95); box-shadow: 0 0 0 4px rgba(59,143,212,.18), 0 0 0 7px rgba(59,143,212,.1); transform: scale(1.05); } /* Mini-Karte im Karten-Popup */ .map-popup { width: 220px; white-space: normal; overflow-wrap: break-word; word-break: break-word; position: relative; } .map-popup img { width: 100%; height: 115px; object-fit: cover; display: block; } .map-popup .map-popup-body { padding: 9px 11px 11px 11px; } .map-popup .map-popup-name { font-weight: bold; font-size: 11pt; color: #474746; } .map-popup .map-popup-meta { color: #6f6a61; font-size: 9pt; margin-top: 2px; } .map-popup .map-popup-price { font-weight: bold; color: #474746; font-size: 10pt; margin-top: 5px; } .map-popup .map-popup-cta { display: inline-block; margin-top: 9px; padding: 6px 13px; background: var(--accent); color: #fff; border-radius: var(--radius-btn); text-decoration: none; font-weight: bold; font-size: 9pt; } .map-popup .map-popup-cta:hover { background: #337ab7; color: #fff; } .map-popup-close { position: absolute; top: 8px; right: 8px; z-index: 20; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #474746; border: 1px solid #d9d1bf; box-shadow: 0 1px 4px rgba(0,0,0,.2); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } .map-popup-close:hover { background: #f5f5f5; } /* FeWo-Kacheln der Startseite sind keine eigene Komponente mehr, sondern dieselbe .search-result-row wie im Suchergebnis (siehe ".srr-stacked" und ".start-fewo-list" weiter oben) - Startseite und Suche sprechen jetzt dieselbe Sprache statt zweier Kachel-Grammatiken. */ .search-no-results { background: #fbfbfb; border: 1px solid #d9d1bf; border-radius: 6px; padding: 20px; color: #474746; margin-top: 20px; } /* Vollbild-Bildbetrachter (js/fewoviewer.js) - loest fancybox 1.3.4 ab. Haengt direkt am body, deshalb ohne #content-Praefix. */ /* Deckend, nicht halbtransparent: die Seite dahinter soll nicht mitlesbar bleiben, sonst konkurriert sie mit dem Bild. */ .fv { display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:9000; background:#111111; } .fv.fv-open { display:block; } .fv .fv-stage { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:56px 16px 24px 16px; box-sizing:border-box; } /* contain: das Bild wird nie beschnitten - bei einer Ferienwohnung ist der Bildrand oft der Inhalt. */ .fv .fv-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; visibility:hidden; } .fv .fv-spin { display:none; position:absolute; color:#fff; font-size:26px; } .fv .fv-bar { position:absolute; z-index:2; left:0; top:0; right:0; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; box-sizing:border-box; } .fv .fv-count { color:#fff; font-size:13px; letter-spacing:0.5px; opacity:0.85; } .fv .fv-btn { border:0; background:rgba(255,255,255,0.14); color:#fff; cursor:pointer; border-radius:999px; line-height:1; padding:0; } /* Bewusst OHNE :hover: auf Touch-Geraeten bleibt der Hover-Zustand nach dem Antippen haengen, der Knopf sieht dann dauerhaft "gedrueckt" aus. Im Vollbild wird ohnehin getippt oder gewischt, nicht mit der Maus gezielt. */ .fv .fv-close { width:40px; height:40px; font-size:28px; } .fv .fv-prev, .fv .fv-next { position:absolute; z-index:2; top:50%; margin-top:-24px; width:48px; height:48px; font-size:34px; } /* z-index oben: auf schmalen Schirmen fuellt das Bild fast die ganze Flaeche und laege sonst ueber den Bedienelementen - die Buehne kommt im HTML nach den Knoepfen. */ .fv .fv-prev { left:14px; } .fv .fv-next { right:14px; } @media (max-width: 640px) { /* Auf dem Handy wird gewischt - die Pfeile bleiben als Hinweis, aber klein und am Rand. */ .fv .fv-stage { padding:52px 6px 16px 6px; } .fv .fv-prev, .fv .fv-next { width:38px; height:38px; font-size:26px; margin-top:-19px; } .fv .fv-prev { left:6px; } .fv .fv-next { right:6px; } }