/*! Ferienhaus-Portal 1.128.47 */ /* ========================================================= Ferienhaus-Portal — Stylesheet Hell, ruhig, mobil und am Schreibtisch gleichermaßen nutzbar. ========================================================= */ :root{ --paper:#F6F8F9; --panel:#FFFFFF; --mist:#E7EEEF; --ink:#14232A; --ink-soft:#5A6B72; --line:#DCE5E7; --lake:#256B7C; --lake-dark:#194E5B; --larch:#C8823C; --ok:#2E7D5B; --ok-bg:#E7F4EC; --bad:#B4472F; --bad-bg:#FBEFEC; --warn-bg:#FCF2E3; --warn:#8A5A18; --r:14px; --shadow:0 1px 2px rgba(20,35,42,.05), 0 12px 32px -18px rgba(20,35,42,.35); /* Ueberschriftenschrift. Umschaltbar ueber das Attribut data-handschrift am -Element: "aus" = wie bisher, "an" = Gochi Hand. */ --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,monospace; } /* ===== Farbwelt „Sonne satt" (umschaltbar, v1.127.72) ===== Heller Sonnencreme-Grund, sattes Petrol als Hauptfarbe, Terrakotta als Highlight, Kakao als Text. Aktiviert über data-farbwelt="sonne" am ; umschaltbar in der Verwaltung unter Einstellungen. Layout/Struktur bleiben. */ :root[data-farbwelt="sonne"]{ --paper:#FBEED9; --panel:#FFF9EE; --mist:#F3E2C4; --ink:#4A2A12; --ink-soft:#8A5A34; --line:#EBD6AE; --lake:#1B7A63; --lake-dark:#135A49; --larch:#E9622E; --ok:#2E7D5B; --ok-bg:#E8F3E2; --bad:#B4472F; --bad-bg:#FBE5DC; --warn-bg:#FBEBC8; --warn:#8A5A18; --shadow:0 1px 2px rgba(74,42,18,.06), 0 12px 32px -18px rgba(74,42,18,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--lake);text-decoration:none} a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--lake);outline-offset:2px} :focus:not(:focus-visible){outline:none} :focus-visible{outline:3px solid var(--lake);outline-offset:2px;border-radius:4px} h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.2;letter-spacing:0;margin:0 0 .4em} h1{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:500} h2{font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:500} h3{font-size:1.05rem;font-weight:600} h4{font-size:1rem;font-weight:700} p{margin:0 0 1em} section{padding:clamp(34px,3.6vw,54px) 0} .wrap{max-width:1280px;margin:0 auto;padding:0 28px} .wrap.narrow{max-width:720px} .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lake);margin-bottom:.8em} .muted{color:var(--ink-soft)} .small{font-size:.9rem}.xsmall{font-size:.8rem} .lead-max{max-width:60ch} .mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px} .mt32{margin-top:32px}.mt36{margin-top:36px}.mt40{margin-top:40px} .mb16{margin-bottom:16px}.mb28{margin-bottom:28px}.mb32{margin-bottom:32px} .pt24{padding-top:24px}.hidden{display:none!important} .hp{position:absolute;left:-9999px} .prose p{max-width:70ch} /* Kopf */ header.site{position:sticky;top:0;z-index:60;background:rgba(246,248,249,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:22px;height:74px} .brand{font-family:var(--display);font-weight:600;font-size:1.08rem;letter-spacing:0;color:var(--ink);display:flex;align-items:center;gap:9px} .brand:hover{text-decoration:none} .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--lake)} .brand .site-logo{height:64px;width:auto;display:block} @media(max-width:700px){.brand .site-logo{height:52px}} /* Logo im Startbild – helle Fassung, damit es auf dem Video klar steht */ .hero-logo{display:block;margin:0 auto 18px;height:clamp(76px,9vw,118px);width:auto; filter:drop-shadow(0 3px 14px rgba(0,0,0,.55))} @media(max-width:700px){.hero-logo{height:70px;margin-bottom:14px}} /* Logo im Fussbereich – gross, auf dunklem Grund hell */ .footer-logo{height:96px;width:auto;display:block;margin:0 0 14px;opacity:.96} @media(max-width:820px){.footer-logo{height:78px}} /* Wartungsseite und Wartungs-Hinweis */ .wartung-seite{max-width:560px;margin:0 auto;padding:40px 18px 60px;text-align:center} .wartung-logo{width:200px;max-width:72%;height:auto;display:block;margin:0 auto 20px} .wartung-seite h1{margin:0 0 14px} .wartung-text{white-space:pre-line;line-height:1.6} .wartung-kontakt{margin-top:16px} .wartung-recht{margin-top:28px;font-size:.92rem} .wartung-anmeldung{margin-top:34px;text-align:left} .wartung-anmeldung summary{cursor:pointer;font-weight:600;text-align:center;padding:8px 0} .wartung-hinweis{background:#fff4d6;border-bottom:1px solid #e5c86a;padding:9px 14px;text-align:center;font-weight:600} .nav .links{margin-left:auto;display:flex;gap:19px;align-items:center} .nav .links a{color:var(--ink);font-size:.9rem;font-weight:500;position:relative;padding:6px 0; transition:color .18s ease} /* Kein klassischer Unterstrich mehr - stattdessen ein feiner Balken, der aufwaechst */ .nav .links a:not(.btn){text-decoration:none} .nav .links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--lake);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .22s ease} .nav .links a:not(.btn):hover{color:var(--lake);text-decoration:none} .nav .links a:not(.btn):hover::after{transform:scaleX(1)} .nav .links a:not(.btn)[aria-current="page"]{color:var(--lake)} .nav .links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)} .nav .links a.btn{color:#fff} .nav .links a.btn:hover{color:#fff} .nav .links a.btn.ghost{color:var(--ink)} .burger{margin-left:auto;display:none;align-items:center;gap:8px;border:1px solid var(--ink);border-radius:10px;padding:9px 13px;cursor:pointer;background:var(--ink)} .burger .burger-lines{display:block} .burger .burger-lines span{display:block;width:20px;height:2px;background:#fff;margin:3px 0;border-radius:2px} .burger .burger-text{color:#fff;font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1} @media(max-width:1150px){ .nav .links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--panel);flex-direction:column; align-items:stretch;gap:0;padding:8px 20px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)} .nav .links.open{display:flex} .nav .links a{padding:12px 0;border-bottom:1px solid var(--line)} .nav .links .btn{margin-top:14px;justify-content:center;border-bottom:none;color:#fff} .burger{display:flex} } /* Bedienelemente */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--lake);color:#fff; border:1px solid var(--lake);border-radius:999px;font-weight:600;cursor:pointer;font-family:var(--body); transition:background .15s,transform .12s,box-shadow .15s;text-align:center;text-decoration:none; min-height:44px;padding:0 20px;font-size:.95rem;line-height:1.2;vertical-align:middle;box-sizing:border-box} .btn:hover{background:var(--lake-dark);border-color:var(--lake-dark);color:#fff;text-decoration:none} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--mist);color:var(--ink);border-color:var(--lake)} .btn.small{min-height:38px;padding:0 16px;font-size:.85rem} /* Filterreihen (Gaestestimmen, Galerie): gleiche Formensprache wie „Verfuegbarkeit pruefen" */ .row-actions .btn.small{border-radius:999px;font-weight:600;border-width:1px} .row-actions .btn.small.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)} .row-actions .btn.small.ghost:hover{background:var(--mist);border-color:var(--lake);color:var(--ink)} .row-actions .btn.small:not(.ghost){background:var(--lake);border-color:var(--lake);color:#fff} .row-actions .btn.small:not(.ghost):hover{background:var(--lake-dark);border-color:var(--lake-dark)} :root[data-farbwelt="sonne"] .row-actions .btn.small:not(.ghost){background:#1E8268;border-color:#1E8268;color:#fff} :root[data-farbwelt="sonne"] .row-actions .btn.small:not(.ghost):hover{background:#15604C;border-color:#15604C} .btn.wide{width:100%} .btn:focus-visible{outline:3px solid var(--larch);outline-offset:2px} .btn[disabled]{opacity:.55;cursor:not-allowed} .btn.danger{background:transparent;color:var(--bad);border-color:#EBC9C1} .btn.danger:hover{background:var(--bad-bg);color:var(--bad)} label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px} input,select,textarea,button{font-family:inherit} input,select,textarea{width:100%;font-size:.95rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px} /* Auswahlfelder: eigenes, ruhiges Aussehen statt Systemoptik (Betriebssystem-Grau) */ select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A2A12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px} select::-ms-expand{display:none} select:hover{border-color:var(--lake)} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--larch);outline-offset:1px;border-color:var(--lake)} select[multiple]{background-image:none;padding-right:12px} input[type=date]{font-family:var(--mono);font-size:.88rem} input[type=checkbox],input[type=radio]{width:auto} textarea{min-height:110px;resize:vertical} .field{margin-bottom:18px} .field > label{display:block;font-size:.78rem;font-weight:500;color:var(--ink-soft); margin-bottom:5px;line-height:1.35} .field > input,.field > select,.field > textarea{width:100%} .field:last-child{margin-bottom:0} /* Kontrollkästchen und Auswahlfelder mit Text daneben */ .check span em{display:block;font-style:normal;font-size:.8rem;color:var(--ink-soft);margin-top:2px} .row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px} /* Ausnahme für Tabellen (v1.127.67): Eine Tabellenzelle darf keine Flex-Box sein – sonst fällt sie aus dem Zeilenverbund und die Trennlinien der Aktionsspalte sitzen versetzt zum Rest der Zeile (Treppen-Effekt in der Übersicht). */ td.row-actions, th.row-actions{display:table-cell;vertical-align:middle; white-space:nowrap;text-align:right;margin:0} td.row-actions > *{vertical-align:middle} td.row-actions > * + *{margin-left:8px} .check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;font-weight:400;color:var(--ink-soft);margin:6px 0 16px} .check input{margin-top:3px} .pay-choice{display:grid;gap:8px} .radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 13px; background:var(--panel);font-weight:500;color:var(--ink);cursor:pointer;margin:0} .radio em{display:block;font-style:normal;font-size:.8rem;color:var(--ink-soft)} .radio input{margin-top:4px} /* Hero */ .hero{padding:clamp(34px,5vw,64px) 0 0} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center} @media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:26px}} .lede{font-size:1.06rem;color:var(--ink-soft);max-width:46ch} .hero-art{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)} .hero-art img{width:100%;height:100%;object-fit:cover} .stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap} .stats b{display:block;font-family:var(--mono);font-size:1.3rem} .stats span{font-size:.8rem;color:var(--ink-soft)} .search .btn{height:44px} @media(max-width:820px){ } @media(max-width:460px){} /* Kacheln */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .card .thumb{display:block;aspect-ratio:3/2;background:var(--mist);position:relative;overflow:hidden} .card .thumb img{width:100%;height:100%;object-fit:cover} .card .pill{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 11px; font-family:var(--mono);font-size:.72rem;font-weight:700} .card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .card h3{margin-bottom:2px} .card h3 a{color:var(--ink)} .place{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px} .facts{display:flex;gap:14px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-soft);margin:10px 0 16px} .facts b{font-family:var(--mono);color:var(--ink)} .facts.big{font-size:.95rem;margin:14px 0 22px} .card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px} .price b{font-family:var(--mono);font-size:1.2rem} .price small{color:var(--ink-soft);font-size:.78rem} /* Abschnitte */ .band-mist{background:var(--mist)} .split{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start} @media(max-width:820px){.split{grid-template-columns:1fr}} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px} .steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:760px){.steps{grid-template-columns:1fr}} .steps li{border-top:2px solid var(--ink);padding-top:14px} .steps .n{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--lake);display:block;margin-bottom:6px} details{border-bottom:1px solid var(--line);padding:12px 0} details summary{cursor:pointer;font-weight:600} details p{margin:10px 0 0} /* Detailseite */ .back{color:var(--ink-soft)} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:160px;gap:10px;border-radius:20px;overflow:hidden} .gallery div{overflow:hidden} .gallery img{width:100%;height:100%;object-fit:cover} .gallery .g0{grid-row:span 2} @media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.gallery .g0{grid-column:span 2}} .detail{display:grid;grid-template-columns:1.45fr .9fr;gap:36px;align-items:start;margin-top:32px} @media(max-width:980px){.detail{grid-template-columns:1fr}} .h-detail{font-size:clamp(1.8rem,4vw,2.6rem)} .booking-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);position:sticky;top:88px} /* Hinweis-Kasten „Buchung im Aufbau" — freundlich, mit Ziegenbild */ .soon-box{display:flex;flex-direction:column;gap:14px;text-align:center} .soon-ziege{width:100%;height:auto;border-radius:14px;object-fit:cover;max-height:220px;border:1px solid var(--line)} .soon-wahl{margin:0 0 2px;font-size:1rem;line-height:1.4;padding:10px 12px; border:1px solid var(--line);border-radius:12px;background:var(--paper)} .soon-wahl b{font-size:1.05rem} .soon-text h3{margin:6px 0 4px;font-size:1.15rem;line-height:1.3} .soon-text p{margin:0 0 10px;font-size:.95rem;line-height:1.55;color:var(--ink)} .soon-text p:last-child{margin-bottom:0} .soon-jahr{font-size:1.05rem} .soon-jahr b{color:var(--lake)} @media(max-width:980px){.booking-box{position:static}} .amenities{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:0;list-style:none;margin:0} .amenities li{background:var(--mist);border-radius:10px;padding:10px 14px;font-size:.9rem} .summary{border-top:1px dashed var(--line);margin-top:16px;padding-top:14px;font-size:.92rem} .summary div{display:flex;justify-content:space-between;gap:18px;margin-bottom:10px;align-items:baseline} .summary div span:last-child{font-family:var(--mono);white-space:nowrap} /* Zeilen mit Fliesstext statt Betrag (Ausstattung, Alter der Kinder, Hausname) duerfen umbrechen - sonst laufen sie aus dem Kasten. */ .summary div.text span:last-child{font-family:inherit;white-space:normal;text-align:right} .summary .total{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;font-weight:700;font-size:1.05rem} .summary .hl{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:8px 10px;font-weight:600} .note{border-radius:10px;padding:11px 13px;font-size:.9rem;margin-bottom:14px} .note.bad{background:var(--bad-bg);color:#8C3320} .note.good{background:var(--ok-bg);color:#1E5F44} .note.info{background:var(--mist);color:var(--ink-soft)} .wide-img{border-radius:20px} /* Kurtaxe im Buchungsformular */ .taxbox{border:1px solid var(--line);border-radius:12px;padding:14px;margin:4px 0 16px;background:#FBFCFC} .taxbox > label{margin-bottom:2px} .taxrow{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0} .taxrow:first-of-type{border-top:none} .taxrow b{display:block;font-size:.9rem;font-weight:600} .taxrow em{display:block;font-style:normal;font-size:.76rem;color:var(--ink-soft);line-height:1.35} .taxrow input{width:66px;text-align:center;font-family:var(--mono);padding:7px 6px} .taxbox .help,#taxHint{margin:12px 0 0;line-height:1.5} .taxbox .taxrow + .help{border-top:1px solid var(--line);padding-top:10px} @media(max-width:560px){ .taxrow{flex-direction:column;align-items:stretch;gap:8px;padding:12px 0} .taxrow input{width:100%;text-align:left} .taxrow em{margin-bottom:2px} } .summary em{display:block;font-style:normal} /* Kalender */ .cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:14px} .cal-month h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .cal-wd{font-size:.62rem;text-align:center;color:var(--ink-soft);font-family:var(--mono);padding-bottom:2px} .cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:7px; background:var(--mist);font-size:.72rem;line-height:1.05;color:var(--ink);border:1px solid transparent;text-decoration:none} .cal-day b{font-weight:600;font-size:.72rem} .cal-day i{font-style:normal;font-family:var(--mono);font-size:.56rem;color:var(--ink-soft)} .cal-day.empty{background:transparent} .cal-day.free{background:#E4F2E9;cursor:pointer} .cal-day.free:hover{outline:2px solid var(--lake);outline-offset:-2px;text-decoration:none} .cal-day.busy{background:#F4DBD3;color:#8C3320} .cal-day.busy i{color:#A8543C} .cal-day.shut{background:#E4E7E9;color:var(--ink-soft)} .cal-day.past{background:#EFF2F3;opacity:.55} .cal-day.past i,.cal-day.shut i{opacity:.7} .cal-day.sel{background:var(--lake);color:#fff;border-color:var(--lake-dark)} .cal-day.sel i{color:rgba(255,255,255,.8)} .cal-day.range{background:#BFDDE3} .cal-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft);margin-top:14px} .cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px} .k-free{background:#E4F2E9}.k-busy{background:#F4DBD3}.k-shut{background:#E4E7E9}.k-past{background:#EFF2F3} /* Ausweichtermine */ .alt-block{margin-top:44px} .alt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:16px} .alt h4{margin-bottom:12px} .alt-head{display:flex;gap:14px;align-items:center;margin-bottom:12px} .alt-head img{width:76px;height:60px;object-fit:cover;border-radius:10px} .alt-head h4{margin:0} .alt-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line); padding:11px 0;color:var(--ink);font-size:.92rem} .alt-row:hover{text-decoration:none;color:var(--lake)} .alt-row em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-soft)} .alt-row b{font-family:var(--mono);white-space:nowrap} /* Fuß */ footer.site{background:#10202A;color:#C7D6DB;padding:52px 0 28px;margin-top:0} footer.site a{color:#fff} /* Gedaempfter Text im Fuss braucht einen HELLEN Ton: das globale .muted zeigt auf --ink-soft, und das ist in der Sonnenwelt ein Braun fuer helle Flaechen. Auf dem dunklen Fuss ergab das dunkelbraun auf fast schwarz (Kontrast ~1,7:1). */ footer.site .muted{color:#9FB2BA} footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:28px} @media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .cols{grid-template-columns:1fr}} footer h4{color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase} .fbrand{font-family:var(--display);font-size:1.3rem;color:#fff;margin:.3em 0} .fsmall{max-width:34ch;font-size:.9rem} footer .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;font-size:.875rem; display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between} /* ========================================================= Verwaltung ========================================================= */ .admin-body{background:#F2F5F6} .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:26px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px} .tile b{display:block;font-family:var(--mono);font-size:1.7rem;line-height:1.2} .tile span{font-size:.82rem;color:var(--ink-soft)} table{width:100%;border-collapse:collapse;font-size:.9rem} th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top} th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} td.num,th.num{font-family:var(--mono);white-space:nowrap} .tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; padding:4px 9px;border-radius:999px;background:var(--mist);color:var(--ink-soft)} /* Formularkarte: Aussehen an einer Stelle definiert */ .admin-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:26px 26px 22px;margin-bottom:22px} .admin-form .summary{margin-top:6px} .admin-form button + button{margin-left:0} .admin-form h3{margin-top:0} .help{font-size:.82rem;color:var(--ink-soft);margin:10px 0 14px;line-height:1.5} .field .help{margin:8px 0 0} /* Hinweistexte direkt unter Eingabefeldern brauchen Luft */ input + .help, select + .help, textarea + .help, input + small, select + small, textarea + small{display:block;margin-top:8px;line-height:1.5} .field + .field{margin-top:4px} .field label + em, .field label + i{display:block;margin-bottom:8px;line-height:1.5} .admin-form > .btn + .help, .admin-form form > .btn + .help{margin-top:14px} .admin-form > h3:first-child{margin-top:0} .admin-form > *:last-child{margin-bottom:0} .admin-form .row-actions + .help{margin-top:14px} .weekdays{display:flex;gap:10px;flex-wrap:wrap} .weekdays label{display:flex;gap:6px;align-items:center;font-weight:500;margin:0;background:var(--mist); padding:8px 12px;border-radius:999px;font-size:.85rem} .login-wrap{max-width:400px;margin:8vh auto;padding:0 20px} @media print{header.site,footer.site,.admin-nav,.admin-top{display:none}} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ========================================================= Version 1.1 — Galerie, Lightbox, Nachrichten ========================================================= */ .gal{display:grid;grid-template-columns:repeat(var(--gal-cols,4),1fr);gap:12px;margin:18px 0} @media(max-width:900px){.gal{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.gal{grid-template-columns:repeat(2,1fr)}} .gal-item{margin:0} .gal-btn{display:block;width:100%;padding:0;border:0;background:var(--mist);border-radius:12px;overflow:hidden;cursor:zoom-in} .gal-btn img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s} .gal-btn:hover img{transform:scale(1.04)} .gal figcaption{font-size:.78rem;color:var(--ink-soft);padding:6px 2px 0} .gal .credit{opacity:.75} .lightbox{position:fixed;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;z-index:120;padding:22px; background:radial-gradient(120% 100% at 50% 0%, #2C3A2A 0%, #1C2A20 55%, #141F18 100%); animation:lb-auf .22s ease-out} @keyframes lb-auf{from{opacity:0}to{opacity:1}} /* Buehne: das Bild sitzt in einem cremefarbenen Rahmen wie die Kaesten der Website */ .lb-buehne{position:relative;display:inline-flex;align-items:center;justify-content:center; max-width:min(1040px,86vw);max-height:78vh; background:#FFF9EE;padding:10px;border-radius:16px; box-shadow:0 26px 70px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,249,238,.16); animation:lb-rein .26s cubic-bezier(.2,.8,.3,1)} @keyframes lb-rein{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}} .lightbox img{display:block;max-width:calc(min(1040px,86vw) - 20px);max-height:calc(78vh - 20px); width:auto;height:auto;border-radius:9px} /* Bildunterschrift auf cremefarbenem Streifen, in der Schrift der Website */ .lightbox .lb-cap{margin:16px auto 0;max-width:64ch;text-align:center; font-family:var(--display);font-size:1.02rem;line-height:1.45;color:#4A2A12; background:#FBF0DC;border:1px solid #E8D3AE;border-radius:999px;padding:9px 22px; overflow-wrap:anywhere} .lightbox .lb-cap:empty{display:none} .lightbox .lb-zaehler{margin-top:10px;color:#F2E6D2;font-family:var(--mono);font-size:.74rem; letter-spacing:.12em;background:rgba(255,249,238,.13);border:1px solid rgba(255,249,238,.22); border-radius:999px;padding:4px 13px} /* Bedienelemente: cremefarben mit Terrakotta — wie die Kalenderpfeile */ .lightbox button{position:absolute;width:52px;height:52px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;line-height:1; font-size:1.5rem;font-family:var(--display); background:#FFFDF8;color:#C9541F;border:1.5px solid #E3C9A4; box-shadow:0 3px 10px rgba(0,0,0,.28); transition:background .15s,color .15s,transform .15s} /* Kein transform in der allgemeinen Regel: Sie ist spezifischer als .lb-prev:hover und wuerde dort die senkrechte Zentrierung (translateY) ueberschreiben — die Pfeile sprangen dadurch beim Ueberfahren um ihre halbe Hoehe nach unten. */ .lightbox button:hover{background:#C9541F;color:#FFF9EE;border-color:#C9541F} .lightbox .lb-close:hover{transform:scale(1.08)} .lightbox button:focus-visible{outline:3px solid #E9A06A;outline-offset:3px} /* Die Bedienelemente sitzen in festem Abstand zur Bildmitte — nicht am Bildrahmen (dann wandern sie bei jedem Formatwechsel) und nicht am Fensterrand (dann stehen sie auf breiten Bildschirmen weit weg vom Bild). Auf schmalen Fenstern ruecken sie automatisch an den Rand. */ .lightbox button{position:fixed} .lb-close{top:20px;right:max(20px, calc(50% - 560px));width:46px;height:46px;font-size:1.15rem} .lightbox .lb-prev{left:max(14px, calc(50% - 570px));top:50%;transform:translateY(-50%)} .lightbox .lb-next{right:max(14px, calc(50% - 570px));top:50%;transform:translateY(-50%)} .lightbox .lb-prev:hover,.lightbox .lb-next:hover{transform:translateY(-50%) scale(1.08)} @media(max-width:700px){ .lightbox{padding:14px} .lb-buehne{padding:7px;border-radius:13px} .lightbox button{width:44px;height:44px;font-size:1.25rem} .lb-close{top:12px;right:12px;width:40px;height:40px} .lb-prev{left:8px}.lb-next{right:8px} .lb-buehne{max-width:calc(100vw - 110px)} .lightbox img{max-width:calc(100vw - 124px)} .lightbox .lb-cap{font-size:.92rem;padding:8px 16px} } .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .media-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)} .media-card img{width:100%;aspect-ratio:4/3;object-fit:cover} .media-meta{padding:12px} .media-meta b{display:block;font-size:.9rem;margin-bottom:2px} /* Galerie-Verwaltung: Filterleiste, Videokacheln, Dateinamen (v1.127.101) */ .medien-filter{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:16px 16px 12px;margin-bottom:8px} .medien-filter .form-zeile{margin-bottom:0} .media-card{position:relative;display:flex;flex-direction:column} .media-card video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#000} .media-card.ist-video img{background:#000} .medien-marke{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.72);color:#fff; font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase; padding:3px 8px;border-radius:999px;pointer-events:none} .medien-datei{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-soft); background:var(--mist);border-radius:6px;padding:3px 6px;margin:2px 0 6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .media-meta .row-actions{flex-wrap:wrap;gap:6px} .medien-blaettern{flex-wrap:wrap;gap:6px} video.preview-img{max-width:360px;width:100%;background:#000} .chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px} .msg{max-width:82%;border-radius:14px;padding:11px 14px;font-size:.92rem} .msg p{margin:0} .msg span{display:block;font-size:.72rem;opacity:.7;margin-top:6px} .msg.guest{background:var(--mist);align-self:flex-start;border-bottom-left-radius:4px} .msg.host{background:var(--lake);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .msg.host a{color:#fff} .slots{display:grid;gap:8px;margin-top:12px} .slot{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line); border-radius:10px;padding:10px 14px;background:var(--panel);color:var(--ink);font-size:.92rem} .slot:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .slot em{font-style:normal;font-size:.78rem;color:var(--ink-soft);display:block} .slot b{font-family:var(--mono);white-space:nowrap} /* ========================================================= Einheitliche Abstände — eine Regel für alle Ansichten ========================================================= */ /* Jeder Block, der Schaltflächen enthält, hat oben und unten Luft */ .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 0} .actions + .help, .actions + .hint, .actions + p{margin-top:14px} /* Hinweistexte: immer eigener Block mit klarem Abstand nach oben */ .help, .hint{display:block;font-size:.82rem;line-height:1.55;color:var(--ink-soft);margin:12px 0 0} .hint{font-size:.8rem} .field .help, .field .hint{margin-top:8px} p.help:last-child, p.hint:last-child{margin-bottom:0} /* Nichts folgt direkt und ungepolstert auf Bedienelemente */ .btn + p, .btn + .help, .btn + .hint, .btn + .note, button + p, button + .help, button + .hint, button + .note, .row-actions + p, .row-actions + .help, .row-actions + .hint, input + p, select + p, textarea + p, input + .help, select + .help, textarea + .help, input + .hint, select + .hint, textarea + .hint, .check + p, .check + .help, .check + .hint, .summary + p, .weekdays + p, .table-scroll + p{margin-top:16px} .field > label + em, .field > label + i{display:block;margin:0 0 8px} .admin-form p:last-child, .panel p:last-child{margin-bottom:0} .summary + .btn, .summary + form, .summary + .note{margin-top:16px} form .btn{margin-bottom:0} /* Anmeldung: Google-Schaltfläche und Trenner */ .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%; background:#fff;color:#3C4043;border:1px solid #DADCE0;border-radius:999px;padding:12px 20px; font-weight:600;font-size:.95rem;font-family:var(--body);cursor:pointer;transition:box-shadow .15s,background .15s} .btn-google:hover{background:#F8F9FA;box-shadow:0 1px 3px rgba(60,64,67,.25);text-decoration:none;color:#3C4043} .btn-google svg{flex:0 0 auto} .or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-soft);font-size:.8rem} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)} /* ========================================================= Version 1.7 — aufgeräumte Verwaltung, Ferien, Auswertung ========================================================= */ /* Menü bricht um, statt aus dem Bild zu laufen */ /* Einheitliche Formularabschnitte */ .admin-form > h3{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;margin-bottom:18px; border-bottom:1px solid var(--line)} .admin-form > h3 .sub{font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--ink-soft)} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 18px;align-items:start} /* Für kurze Felder: passen zu zweit auch auf ein Telefon */ .form-grid.eng{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px} .form-grid.zwei{grid-template-columns:1fr 1fr;gap:12px} .form-grid .field{margin-bottom:0;display:flex;flex-direction:column;height:auto} .form-grid .field.wide{grid-column:1/-1} /* Beschriftungen dürfen zweizeilig werden, ohne die Eingaben zu verschieben: der Platz dafür wird immer reserviert. */ .form-grid .field > label{display:block;height:2.6em;line-height:1.3;margin-bottom:6px; overflow:hidden;font-size:.78rem;font-weight:500;color:var(--ink-soft)} /* Feste Höhe statt Mindesthöhe: Bei „min-height" wächst die Zelle mit dem Inhalt, und schon eine zweizeilige Beschriftung verschiebt das Feld daneben. */ .form-grid .field > input, .form-grid .field > select, .form-grid .field > textarea{margin-top:0} .form-grid .field > .help{margin-top:auto;padding-top:8px} /* Kontrollkästchen in einer Rasterzelle sitzen unten bündig */ .form-grid .field > .check{margin-top:0} @media(max-width:560px){ .form-grid{gap:12px} .form-grid .field > label{height:auto;margin-bottom:4px} .field{margin-bottom:12px} .field > label{font-size:.8rem} .panel,.admin-form{padding:18px 16px} input,select,textarea{padding:11px 12px;font-size:1rem} .field > .help{font-size:.76rem;margin-top:5px} } .savebar{display:flex;flex-wrap:wrap;gap:12px;align-items:center; margin-top:24px;padding-top:18px;border-top:1px solid var(--line);background:none} .savebar .muted{font-size:.82rem} .savebar + .help,.savebar + .hint{margin-top:14px} /* Ferien im Kalender */ .cal-day.ferien{box-shadow:inset 0 -3px 0 var(--larch)} .k-ferien{background:var(--larch)} /* Auswertung */ .stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px} .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .stat b{display:block;font-family:var(--mono);font-size:1.5rem;line-height:1.25} .stat span{font-size:.78rem;color:var(--ink-soft)} .stat.good b{color:var(--ok)} .stat.bad b{color:var(--bad)} .chart{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:190px; margin:18px 0 8px;padding-top:18px;box-sizing:border-box; background-image:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px), var(--line) calc(25% - 1px),var(--line) 25%);background-origin:content-box;background-clip:content-box} /* Skala links und Werte über den Balken (v1.127.69) */ .chart-wrap{display:flex;align-items:stretch;gap:10px} .chart-rechts{flex:1;min-width:0} .chart-skala{display:flex;flex-direction:column;justify-content:space-between;height:190px; margin:18px 0 8px;padding-top:18px;box-sizing:border-box;text-align:right;white-space:nowrap; font-family:var(--mono);font-size:.62rem;color:var(--ink-soft);line-height:1} .chart .bar{position:relative} .chart-wert{position:absolute;bottom:100%;left:-4px;right:-4px;text-align:center;font-family:var(--mono); font-size:.6rem;font-weight:700;color:var(--ink);padding-bottom:3px;line-height:1} .chart-kosten{position:absolute;top:3px;left:0;right:0;text-align:center;font-family:var(--mono); font-size:.58rem;font-weight:700;color:#7a4a37;line-height:1} .chart .col{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%} .chart .bar{border-radius:4px 4px 0 0;min-height:2px} .chart .bar.rev{background:var(--lake)} .chart .bar.cost{background:#E4B7A6} .chart-labels{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font-family:var(--mono); font-size:.62rem;color:var(--ink-soft);text-align:center} .chart-legend{display:flex;gap:16px;font-size:.78rem;color:var(--ink-soft);margin-top:10px} .chart-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px} tr.sumrow td{border-top:2px solid var(--ink);font-weight:700;background:var(--mist)} /* Kalender: Bereichsvorschau und Hinweiszeile */ .cal-hint{font-size:.85rem;color:var(--ink-soft);background:var(--mist);border-radius:10px; padding:9px 13px;margin:0 0 14px;transition:background .2s,color .2s} .cal-hint.on{background:#DCEFE3;color:#1E5F44;font-weight:500} .cal-day.preview{background:#BFDDE3;box-shadow:inset 0 0 0 1px rgba(37,107,124,.35)} /* Ersatz für vormals gesetzte Inline-Abstände */ .steps-list{margin:12px 0 0;padding-left:20px} .steps-list li{margin-bottom:6px} .inline-list{margin:8px 0 0;padding-left:20px} .preview-img{max-width:280px;border-radius:12px;margin-bottom:16px} .check.tight{margin:0 0 8px} .check.tight.last{margin:0} .note.flash{margin-top:20px} /* Die alten Rasterklassen bleiben für eigene Anpassungen erhalten */ .grid2,.grid3,.grid4{display:grid;gap:18px 20px} .grid2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid3{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))} .grid4{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))} /* ========================================================= Verwaltung: Seitenleiste statt Reiterleiste ========================================================= */ .admin-bar{display:none;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:12px 18px; position:sticky;top:0;z-index:60} .admin-bar .brand{color:#fff;font-size:1rem} .admin-bar .dot{background:var(--larch)} .admin-bar .spacer{margin-left:auto} .admin-bar .bar-link{color:#B9CCD2;font-size:.84rem} .side-toggle{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:8px 10px;cursor:pointer} .side-toggle span{display:block;width:17px;height:2px;background:#fff;margin:3px 0;border-radius:2px} .admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh} /* Die Leiste bleibt beim Scrollen stehen. align-self:start ist dabei entscheidend — ohne das dehnt das Raster sie auf volle Höhe und „sticky" bleibt wirkungslos. */ .admin-side{background:var(--ink);color:#C7D6DB;padding:20px 14px 16px;display:flex;flex-direction:column; position:sticky;top:0;align-self:start;height:100vh;max-height:100vh;overflow:hidden;scrollbar-width:thin} .side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px} .side-nav::-webkit-scrollbar{width:6px} .side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px} /* Wächst die Liste über den Bildschirm hinaus, scrollt nur sie — Kopf und Fuß bleiben sichtbar */ .side-head{flex:0 0 auto;padding:0 10px 14px} .side-head .brand{color:#fff;font-size:1.1rem;display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800} .side-head .dot{width:11px;height:11px;border-radius:50%;background:var(--larch);display:inline-block} .side-sub{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase; color:#7E97A0;margin-top:7px;padding-left:20px} .side-group{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:#6F8A93;padding:14px 11px 6px;position:sticky;top:0;background:var(--ink);z-index:2} .side-group:first-child{padding-top:4px} .side-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#C7D6DB; font-size:.92rem;font-weight:500;line-height:1.2;margin-bottom:2px} .side-link svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:.75} .side-link:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none} .side-link.active{background:var(--panel);color:var(--ink);font-weight:600} .side-link.active svg{opacity:1;color:var(--lake)} .side-badge{margin-left:auto;background:var(--larch);color:#fff;font-family:var(--mono);font-size:.66rem; min-width:20px;text-align:center;border-radius:999px;padding:2px 6px;font-weight:700} .side-link.active .side-badge{background:var(--lake)} .side-foot{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.12);padding:14px 11px 0;display:grid;gap:8px} .side-foot a{color:#93AEB6;font-size:.82rem} .side-foot a:hover{color:#fff} .side-backdrop{display:none} .admin-main{padding:36px 36px 72px;max-width:1200px} .admin-main > h2:first-of-type{margin-top:0} @media(max-width:1000px){ .admin-bar{display:flex} .admin-shell{grid-template-columns:minmax(0,1fr)} .admin-side{position:fixed;top:0;left:0;bottom:0;width:min(268px,86vw);transform:translateX(-100%); transition:transform .22s ease;z-index:70;height:100vh;height:100dvh} .admin-side.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.4)} .side-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(12,22,27,.5);opacity:0; pointer-events:none;transition:opacity .2s;z-index:65} .side-backdrop.on{opacity:1;pointer-events:auto} body.side-open{overflow:hidden} .admin-main{padding:22px 18px 60px} } @media(min-width:1001px){ .admin-bar{display:none} } /* ========================================================= Seiteneditor ========================================================= */ .ed{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);position:relative} .ed-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px; padding:0 9px;border:1px solid transparent;border-radius:9px;background:var(--panel);color:var(--ink); font-size:.88rem;cursor:pointer;line-height:1;font-family:var(--body)} .ed-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .ed-btn b,.ed-btn i,.ed-btn u,.ed-btn s{font-size:.95rem;font-style:normal;font-weight:700} .ed-btn i{font-style:italic;font-weight:600} .ed-btn u{text-decoration:underline;font-weight:600} .ed-btn s{text-decoration:line-through;font-weight:600} .ed-btn:hover{border-color:var(--line);background:#fff} .ed-btn:active{background:var(--mist)} .ed-toggle{margin-left:auto;font-family:var(--mono);font-size:.72rem} .ed-body{min-height:320px;max-height:60vh;overflow-y:auto;padding:18px 20px;font-size:.98rem;line-height:1.65;outline:none} .ed-body:focus{box-shadow:inset 0 0 0 1px rgba(37,107,124,.35)} .ed-body figure.ausgewaehlt,.ed-body figure:focus-within{outline:2px solid rgba(37,107,124,.5);outline-offset:2px} .ed-body h2{font-size:1.35rem;margin:1em 0 .4em} .ed-body h3{font-size:1.1rem;margin:1em 0 .4em} .ed-body p{margin:0 0 .9em} .ed-body ul,.ed-body ol{margin:0 0 .9em;padding-left:22px} .ed-body blockquote{margin:0 0 .9em;padding-left:14px;border-left:3px solid var(--lake);color:var(--ink-soft)} .ed-source{width:100%;min-height:320px;font-family:var(--mono);font-size:.85rem;border:0;border-radius:0} /* Einwilligung vor dem Laden fremder Dienste */ .consent-box{border:1px solid var(--line);border-radius:12px;padding:20px;background:#FBFCFC;margin-top:20px} .consent-box h3{margin-bottom:10px} .consent-box p{margin-bottom:10px} /* Textfeldgrößen als Klassen statt im Markup */ .ta-s{min-height:90px} .ta-m{min-height:180px} .ta-l{min-height:340px} textarea.ed-source{min-height:320px} /* Schaltfläche, die sich an Eingabefeldern derselben Zeile ausrichtet */ .field-action{display:flex;align-items:flex-end} .field-action .btn{height:44px} /* Anfahrt */ .mapblock{margin:18px 0} .map-address{background:var(--mist);border-radius:12px;padding:16px 18px;line-height:1.6;font-size:.95rem} .map-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:14px} .map-btn{display:block;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--panel);color:var(--ink)} .map-btn:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .map-btn b{display:block;font-size:.94rem} .map-btn span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px} .map-frame{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9} .map-frame iframe{width:100%;height:100%;border:0;display:block} .map-consent{margin-top:16px} /* ========================================================= Fortschrittsanzeige ========================================================= */ .progress-pct{font-family:var(--mono);font-size:.95rem;color:var(--lake);font-weight:700} .progress-track{height:10px;border-radius:999px;background:var(--mist);overflow:hidden} .progress-fill{height:100%;width:0;border-radius:999px;background:var(--lake); transition:width .25s ease;background-image:linear-gradient(90deg,var(--lake),#3E93A6)} .progress-fill.finished{background-image:linear-gradient(90deg,var(--ok),#3FA37A)} .progress-note{font-size:.83rem;color:var(--ink-soft);margin-top:9px} .progress-log{list-style:none;margin:10px 0 0;padding:0;max-height:170px;overflow-y:auto; font-size:.8rem;font-family:var(--mono)} .progress-log li{padding:3px 0;border-top:1px solid var(--line);color:var(--ink-soft)} .progress-log li:first-child{border-top:0} .progress-log li.bad{color:var(--bad)} .progress-log li.ok::before{content:"✓ ";color:var(--ok)} .progress-log li.bad::before{content:"✕ "} @media(prefers-reduced-motion:reduce){.progress-fill{transition:none}} /* ========================================================= Editor: Werkzeugleiste, Auswahlfenster und Inhaltsklassen ========================================================= */ .ed-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:var(--mist); border-bottom:1px solid var(--line);align-items:center} .ed-group{display:flex;gap:2px;padding-right:8px;margin-right:2px;border-right:1px solid var(--line)} .ed-group:last-of-type,.ed-group-fix{border-right:0;padding-right:0;margin-right:0} .ed-group-fix{margin-left:auto} .ed-more{display:none;flex-wrap:wrap;gap:6px;width:100%;padding-top:8px;margin-top:2px; border-top:1px solid var(--line)} .ed-bar.mehr-offen .ed-more{display:flex} .ed-btn.on{background:var(--ink);border-color:var(--ink)} .ed-btn.on svg{stroke:#fff} .ed-drop{position:relative} .ed-menu{display:none;position:absolute;top:42px;left:0;z-index:50;background:var(--panel); border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px; min-width:170px;max-width:min(240px,80vw)} .ed-menu.open{display:block} .ed-menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;border-radius:7px; padding:7px 9px;cursor:pointer;text-align:left;font-size:.9rem;color:var(--ink)} .ed-menu-item:hover{background:var(--mist)} .ed-menu-item i{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.12);display:inline-block} .ed-modal-back{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(12,22,27,.55);z-index:120;display:flex; align-items:center;justify-content:center;padding:24px} .ed-modal{background:var(--panel);border-radius:16px;max-width:900px;width:100%;max-height:82vh;display:flex;flex-direction:column} .ed-modal-head{padding:18px 22px;border-bottom:1px solid var(--line);font-size:1.05rem} .ed-modal-body{padding:20px 22px;overflow-y:auto} .ed-modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end} .ed-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .ed-media-item{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0;cursor:pointer;overflow:hidden;text-align:left} .ed-media-item:hover{border-color:var(--lake)} .ed-media-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .ed-media-item span{display:block;padding:8px 10px;font-size:.78rem;color:var(--ink-soft)} .ed-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .ed-taglist .btn{margin-top:10px} /* Inhaltsklassen — gelten im Editor und auf der Website gleichermaßen */ .prose .text-small,.ed-body .text-small{font-size:.85rem} .prose .text-large,.ed-body .text-large{font-size:1.2rem} .prose .text-xl,.ed-body .text-xl{font-size:1.5rem;line-height:1.3} .prose .lead,.ed-body .lead{font-size:1.12rem;color:var(--ink-soft);line-height:1.6} .prose .align-left,.ed-body .align-left{text-align:left} .prose .align-center,.ed-body .align-center{text-align:center} .prose .align-right,.ed-body .align-right{text-align:right} .prose .c-lake,.ed-body .c-lake{color:var(--lake)} .prose .c-larch,.ed-body .c-larch{color:var(--larch)} .prose .c-ok,.ed-body .c-ok{color:var(--ok)} .prose .c-bad,.ed-body .c-bad{color:var(--bad)} .prose .c-muted,.ed-body .c-muted{color:var(--ink-soft)} .prose .hl-yellow,.ed-body .hl-yellow{background:#FBEFC4;padding:1px 4px;border-radius:4px} .prose .hl-green,.ed-body .hl-green{background:#DCEFE3;padding:1px 4px;border-radius:4px} .prose .hl-blue,.ed-body .hl-blue{background:#DCE9EF;padding:1px 4px;border-radius:4px} .prose .box,.ed-body .box{background:var(--mist);border-radius:12px;padding:16px 18px;margin:18px 0} .prose figure,.ed-body figure{margin:20px 0} .prose figure img,.ed-body figure img{width:100%;border-radius:14px;display:block} .prose figcaption,.ed-body figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:7px} .prose .img-small,.ed-body .img-small{max-width:340px;margin-left:auto;margin-right:auto} .prose .img-left,.ed-body .img-left{float:left;max-width:46%;margin:6px 22px 14px 0} .prose .img-right,.ed-body .img-right{float:right;max-width:46%;margin:6px 0 14px 22px} .prose::after{content:"";display:block;clear:both} @media(max-width:640px){ .prose .img-left,.prose .img-right,.ed-body .img-left,.ed-body .img-right{float:none;max-width:100%;margin:18px 0} } /* Schutz gegen verschachtelte Aktionsblöcke: innen keine eigenen Abstände */ .actions .actions,.row-actions .actions,.savebar .actions, .actions .row-actions,.savebar .row-actions{margin:0;padding:0;border:0; display:inline-flex;align-items:center;gap:10px} /* Alles in einer Aktionsreihe sitzt auf einer Linie */ .actions,.row-actions,.savebar{align-items:center} .actions > *,.row-actions > *,.savebar > *{margin-top:0;margin-bottom:0} .actions form,.row-actions form,.savebar form, .actions .inline-form,.row-actions .inline-form,.savebar .inline-form, td form,td .inline-form{display:inline-flex;align-items:center;margin:0;vertical-align:middle} .inline-form{display:inline-flex;align-items:center;margin:0} td .row-actions{margin:0} /* ========================================================= Zurück nach oben ========================================================= */ .to-top{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;align-items:center;gap:8px; min-height:48px;padding:0 18px 0 15px;border:1px solid var(--line);border-radius:999px; background:var(--panel);color:var(--ink);font-family:var(--body);font-size:.88rem;font-weight:600; box-shadow:0 6px 22px -8px rgba(20,35,42,.45);cursor:pointer; opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s,background .15s} .to-top.on{opacity:1;transform:translateY(0);pointer-events:auto} .to-top:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .to-top:focus-visible{outline:3px solid var(--larch);outline-offset:3px} .to-top svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:620px){ .to-top{right:14px;bottom:14px;padding:0;width:48px;justify-content:center} .to-top span{display:none} } @media(prefers-reduced-motion:reduce){ .to-top{transition:opacity .01s} } @media print{.to-top{display:none}} /* ========================================================= Barrierefreiheit ========================================================= */ .skip{position:absolute;left:-9999px;top:0} .skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:9px} main:focus{outline:none} :focus-visible{outline:3px solid var(--larch);outline-offset:2px;border-radius:4px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--larch);outline-offset:2px} .cal-day:focus-visible{outline:3px solid var(--larch);outline-offset:1px;z-index:2;position:relative} /* Mindestgröße für Tippziele auf Touchgeräten */ @media(pointer:coarse){ .btn.small{min-height:40px} .cal-day{min-height:38px} .ed-btn{min-height:38px;min-width:38px} } /* Kontrast in Statusfarben */ .tag.ok{color:#175A3E} .tag.bad{color:#8C3320} .tag.pend{color:#7A4E12} [aria-current="page"]{font-weight:700} /* Schaltflächen behalten ihre Farben, egal in welchem Umfeld sie stehen */ a.btn,a.btn:hover,a.btn:focus{color:#fff} a.btn.ghost{color:var(--ink)} a.btn.ghost:hover{color:var(--ink);background:var(--mist);border-color:var(--lake)} a.btn.danger,a.btn.danger:hover{color:var(--bad)} .side-foot a.btn,.card a.btn,footer a.btn{color:#fff} /* ========================================================= Fortschrittsfenster im Vordergrund ========================================================= */ .ov-back[hidden]{display:none} .ov-back{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:130;background:rgba(12,22,27,.55);display:flex; align-items:center;justify-content:center;padding:22px} .ov-card{background:var(--panel);border-radius:16px;width:100%;max-width:520px;padding:24px; box-shadow:0 24px 60px -20px rgba(12,22,27,.6)} .ov-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px} .ov-head b{font-size:1.05rem} .ov-foot{display:flex;justify-content:flex-end;margin-top:18px} body.ov-open{overflow:hidden} .ov-card .progress-track{height:12px} .ov-card .progress-log{max-height:190px;margin-top:14px} @media(max-width:520px){ .ov-card{padding:18px} .ov-card .progress-log{max-height:150px} } /* Unbestimmter Fortschritt für Vorgänge ohne messbare Dauer */ .progress-track.indet{overflow:hidden;position:relative} .progress-track.indet .progress-fill{width:40%;position:absolute;left:-40%;animation:laufen 1.1s infinite ease-in-out} @keyframes laufen{0%{left:-40%}100%{left:100%}} .ov-card.busy .progress-note{margin-top:12px} @media(prefers-reduced-motion:reduce){ .progress-track.indet .progress-fill{animation:none;left:0;width:100%;opacity:.5} } /* Hochladen im Editor */ .ed-upload{border:2px dashed var(--line);border-radius:12px;padding:18px;margin-bottom:18px;background:#FBFCFC} .ed-upload.over{border-color:var(--lake);background:#F0F7F8} .ed-upload b{display:block;margin-bottom:4px} .ed-upload input[type=file]{margin-top:10px} .ed-up-progress{display:none;margin-top:12px} .ed-up-progress.on{display:block} .ed-up-track{height:8px;background:var(--mist);border-radius:999px;overflow:hidden} .ed-up-fill{height:100%;width:0;background:var(--lake);transition:width .2s} .ed-up-note{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:7px} .ed-media-video{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--ink); color:#fff;font-size:.85rem;font-family:var(--mono)} /* Videos in Inhalten und Galerien */ .prose video,.ed-body video,.gal-video{width:100%;border-radius:14px;display:block;background:#000} .gal-video{aspect-ratio:4/3;object-fit:cover} /* Schnellauswahl für Zeiträume */ .chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px; padding:7px 13px;font-size:.82rem;font-family:var(--body);cursor:pointer;min-height:36px} .chip:hover{border-color:var(--lake);color:var(--lake)} .chip.on{background:var(--lake);border-color:var(--lake);color:#fff} .chip:focus-visible{outline:3px solid var(--larch);outline-offset:2px} /* Freie Termine als anklickbare Kärtchen */ .slotchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:2px 0 14px} .slotchips-label{width:100%;font-size:.76rem;color:var(--ink-soft);margin-bottom:2px} .slotchip{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:10px; padding:7px 11px;background:var(--panel);color:var(--ink);line-height:1.25;min-height:44px;justify-content:center} .slotchip:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .slotchip b{font-size:.85rem;font-family:var(--mono)} .slotchip span{font-size:.72rem;color:var(--ink-soft)} .slotchip:hover span{color:var(--lake)} .alt-head h4 a{color:var(--ink)} .alt-head h4 a:hover{color:var(--lake);text-decoration:none} /* ========================================================= Rückfalllösungen für ältere Browser aspect-ratio kennt Safari erst ab Version 15, Firefox ab 89. ========================================================= */ @supports not (aspect-ratio: 1 / 1) { .card .thumb{height:0;padding-bottom:66.6%;position:relative} .card .thumb img{position:absolute;top:0;left:0;width:100%;height:100%} .gal-btn img,.gal-video{height:220px} .media-card img{height:170px} .ed-media-item img,.ed-media-video{height:120px} .map-frame{height:0;padding-bottom:56.25%;position:relative} .map-frame iframe{position:absolute;top:0;left:0} .cal-day,.rp-day{height:42px} } /* Flexbox-Abstände: ältere Safari-Fassungen kennen gap in Flex nicht */ @supports not (gap: 1px) { .row-actions > * + *,.actions > * + *,.savebar > * + *{margin-left:10px} .slotchips > * + *{margin-left:7px} } /* Nach-oben-Knopf verdeckt die Fußzeile nicht mehr */ .to-top.ueber-fuss{background:var(--panel);color:var(--ink);box-shadow:0 8px 26px -8px rgba(0,0,0,.55)} @media(max-width:620px){ .to-top.ueber-fuss{bottom:auto;top:auto;transform:translateY(-64px)} } footer .fine{padding-bottom:8px} /* Tabellen auf schmalen Bildschirmen: seitlich scrollen statt abschneiden */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative} .table-scroll table{min-width:min(520px,100%)} @media(min-width:560px){.table-scroll table{min-width:520px}} .table-scroll td.num,.table-scroll th.num{white-space:nowrap} @media(max-width:700px){ .table-scroll::after{content:"seitlich wischen für mehr";display:block;font-size:.72rem; color:var(--ink-soft);padding:8px 2px 0;font-family:var(--mono)} } /* Listen statt Tabellen, wo es übersichtlicher ist */ .datalist{display:grid;gap:10px} .datarow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center; border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--panel); max-width:100%;overflow-wrap:anywhere} .datarow b{font-size:.92rem} .datarow span{font-size:.82rem;color:var(--ink-soft);font-family:var(--mono)} .datarow .datarow-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px} @media(max-width:700px){ .datarow{flex-direction:column;align-items:stretch} .datarow .datarow-actions{margin-left:0;width:100%;margin-top:4px} .datarow .datarow-actions .btn,.datarow .datarow-actions .inline-form{flex:1 1 auto} .datarow .datarow-actions .inline-form .btn{width:100%} } /* ========================================================= Saisonzeiten als Karten ========================================================= */ .season-list{display:grid;gap:16px;margin-bottom:24px} .season{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px} .season.vergangen{opacity:.65} .season-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;justify-content:space-between; padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px} .season-head h4{margin:0 0 4px} .season-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:.82rem;color:var(--ink-soft)} .season-meta span{font-family:var(--mono)} .season-price{font-weight:700;font-size:1rem;color:var(--lake);white-space:nowrap} .season-quick label{display:block;font-size:.8rem;margin-bottom:8px} .season-quick-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(80px,1fr) minmax(80px,1fr) auto;gap:8px;align-items:center} .season-quick-row input,.season-quick-row select{min-height:44px} .season-quick .help{margin-top:8px} .season-apply{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .season-apply summary{cursor:pointer;font-weight:600;font-size:.92rem;padding:6px 0} .season-apply summary::marker{color:var(--lake)} .season-apply .weekdays{margin-top:10px} .season-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding-top:12px; border-top:1px solid var(--line)} @media(max-width:620px){ .season-quick-row{grid-template-columns:1fr 1fr;gap:8px} .season-quick-row .btn{grid-column:1/-1;width:100%} .season-price{width:100%} } /* Fortschrittsfenster: auf dem Handy den Bildschirm nutzen */ @media(max-width:560px){ .ov-back{padding:14px;align-items:flex-end} .ov-card{max-width:100%;border-radius:18px 18px 12px 12px} .ov-card .progress-log{max-height:32vh} .ov-foot .btn{width:100%;justify-content:center} } .ov-card:focus{outline:none} .ov-card .progress-fill.finished{background-image:linear-gradient(90deg,var(--ok),#3FA37A)} /* Sprachumschalter */ .langswitch{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--panel)} .langswitch a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:32px; border-radius:999px;font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--ink-soft)} .langswitch a:hover{background:var(--mist);color:var(--ink);text-decoration:none} .langswitch a.on{background:var(--lake);color:#fff} @media(max-width:900px){.langswitch{margin-top:12px;align-self:flex-start}} /* Editor auf schmalen Bildschirmen */ @media(max-width:620px){ .ed-bar{gap:4px;padding:8px} .ed-group{padding-right:6px;gap:2px} .ed-btn{min-width:40px;height:40px} .ed-toggle{font-size:.7rem;padding:0 10px} .ed-more{gap:4px} } /* Sprachkarten im Seiteneditor */ .langbox{border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:20px;background:#FBFCFC} .langbox > h3{margin-top:0;border-bottom:1px solid var(--line);padding-bottom:10px} .langbox .flag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--lake)} .langhint{border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin-top:20px; font-size:.85rem;color:var(--ink-soft);background:var(--mist)} /* Übersetzungshilfe */ .translate-note{margin-top:8px;font-size:.8rem} .langbox .actions{margin-top:10px} .langbox .field .actions{margin-top:8px} /* ========================================================= Nichts läuft seitlich aus dem Bild ========================================================= */ /* Kein overflow-x:hidden auf html oder body — das macht sie zum Scrollbehälter und setzt jedes „position:sticky" darin außer Kraft (Seitenleiste, Kopfzeile). „clip" begrenzt genauso, ohne einen Scrollbehälter zu erzeugen. */ html{overflow-x:clip} body{overflow-x:clip} @supports not (overflow-x: clip) { /* Ältere Browser: lieber ein wenig seitliches Scrollen als eine tote Seitenleiste */ body{overflow-x:auto} } .admin-main,.panel,.admin-form,.season,.datarow,.card,.slotchip{max-width:100%;min-width:0} .wrap{min-width:0} .admin-form,.panel,.season{overflow-wrap:break-word} code,.datarow span,.season-meta span{overflow-wrap:anywhere} .form-grid > *,.row-actions > *,.actions > *,.savebar > *{min-width:0} img,video,iframe{max-width:100%} /* Anklickbare Kacheln und hervorgehobene Nachrichten */ a.tile{display:block;color:var(--ink);transition:border-color .15s,transform .12s} a.tile:hover{border-color:var(--lake);text-decoration:none;transform:translateY(-2px)} a.tile.hervor{border-color:var(--larch);background:#FEFAF5} a.tile.hervor b{color:var(--larch)} .season.neu{border-color:var(--larch);background:#FEFAF5} .season.neu .season-price{color:var(--larch)} .feld-schmal{max-width:150px} .sicherheitsbanner{margin-bottom:20px} .sicherheitsbanner form{margin:0} /* Telefonnummern mit Aktionen */ .phone-actions{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center} .phone-nummer{font-family:var(--mono);font-size:.88rem;color:var(--ink)} .phone-nummer:hover{color:var(--lake)} .phone-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px; padding:5px 11px;font-size:.78rem;color:var(--ink);background:var(--panel);min-height:34px} .phone-btn:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .phone-btn.wa:hover{border-color:#25D366;color:#128C4A} .phone-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .phone-btn.klein span{display:none} .phone-btn.klein{padding:5px 8px} @media(pointer:coarse){.phone-btn{min-height:38px}} /* Ersatzklassen für vormals eingebettete Stile */ .fliess{font-family:var(--body)} .nowrap{white-space:nowrap} .fehler{color:var(--bad)} .blass{opacity:.55} .logo-vorschau{max-width:200px;margin-top:8px;border-radius:8px} .zwischen{justify-content:space-between} .einspaltig{grid-template-columns:1fr} .mitte{text-align:center} summary{cursor:pointer} .seite-mitte{padding:60px 20px} /* Speicherleiste als eigene Karte, wenn sie außerhalb eines Abschnitts steht */ .savebar-karte{padding:20px 26px} .savebar-karte .savebar{margin-top:0;padding-top:0;border-top:0} /* ========================================================= Belegungsplan ========================================================= */ .plan-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line); border-radius:var(--r);background:var(--panel);margin-bottom:16px} .plan{min-width:760px} .plan-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--line)} .plan-row:last-child{border-bottom:0} .plan-haus{padding:10px 12px;border-right:1px solid var(--line);position:sticky;left:0;background:var(--panel);z-index:3} .plan-haus a{font-weight:600;font-size:.9rem;color:var(--ink);display:block} .plan-haus a:hover{color:var(--lake);text-decoration:none} .plan-haus span{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:2px} .plan-tage{display:grid;grid-template-columns:repeat(var(--spalten),minmax(26px,1fr));position:relative} .plan-monate .plan-haus{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .plan-monat{padding:6px 8px;font-weight:700;font-size:.8rem;border-right:1px solid var(--line);background:var(--mist)} .plan-kopf .plan-tag{padding:4px 0;text-align:center;border-right:1px solid var(--line);font-size:.7rem;line-height:1.15} .plan-kopf .plan-tag b{display:block;font-family:var(--mono);font-size:.78rem} .plan-kopf .plan-tag span{color:var(--ink-soft);font-size:.62rem} .plan-kopf .plan-tag.we{background:var(--mist)} .plan-kopf .plan-tag.heute{background:var(--lake);color:#fff} .plan-kopf .plan-tag.heute span{color:rgba(255,255,255,.85)} .plan-kopf .plan-tag.ferien{box-shadow:inset 0 -3px 0 var(--larch)} .plan-zelle{min-height:46px;border-right:1px solid var(--line)} .plan-zelle.we{background:#F7F9F9} .plan-zelle.heute{background:rgba(37,107,124,.10)} .plan-balken{grid-row:1;align-self:center;margin:4px 1px;padding:5px 8px;border-radius:8px; display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;font-size:.76rem; color:#fff;background:var(--lake);min-height:32px;position:relative;z-index:2} .plan-balken:hover{text-decoration:none;filter:brightness(1.08)} .plan-balken.fest{background:var(--lake)} .plan-balken.anfrage{background:var(--larch)} .plan-balken.sperre{background:#8795A0} .plan-balken.sonst{background:#6B7C85} .plan-balken.offen{box-shadow:inset 0 0 0 2px #B4472F} .plan-name{overflow:hidden;text-overflow:ellipsis;font-weight:600} .plan-info{margin-left:auto;opacity:.85;font-family:var(--mono);font-size:.68rem} .plan-luecke{grid-row:1;align-self:center;margin:4px 1px;border:1px dashed #C98A5E;border-radius:8px; min-height:32px;display:flex;align-items:center;justify-content:center;color:#A8683C; font-family:var(--mono);font-size:.7rem;background:rgba(201,138,94,.08);z-index:1} .plan-legende{display:flex;flex-wrap:wrap;gap:16px;font-size:.78rem;color:var(--ink-soft);margin-bottom:24px} .plan-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px} .l-fest{background:var(--lake)} .l-anfrage{background:var(--larch)} .l-sperre{background:#8795A0} .l-offen{background:#fff;box-shadow:inset 0 0 0 2px #B4472F} .l-luecke{background:rgba(201,138,94,.2);border:1px dashed #C98A5E} .l-we{background:var(--mist)} .l-ferien{background:var(--larch)} @media(max-width:700px){ .plan-row{grid-template-columns:120px 1fr} .plan-haus{padding:8px} .plan-haus a{font-size:.8rem} } /* 404-Seite */ .error-panel{text-align:left} .error-svg{width:100%;max-width:340px;height:auto;margin:0 auto 18px;display:block} .err-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:14px} .err-links a{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink)} .err-links a:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .err-links b{display:block;font-size:.95rem} .err-links span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:3px} .err-links a:hover span{color:var(--lake)} /* Hinweisband zur Bestätigung */ /* Speichern unter jedem Einstellungskasten */ .hinweis-korrektur{margin-bottom:24px} .hinweis-korrektur .actions{margin-top:12px} /* Kontaktseite zweispaltig */ .kontakt-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start} @media(max-width:860px){.kontakt-grid{grid-template-columns:1fr;gap:24px}} /* Mein Konto als erster Punkt im Menü */ .nav-konto{display:inline-flex;align-items:center;gap:7px;font-weight:600} .nav-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(max-width:900px){ .nav-konto{order:-1;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)} } /* Seitenleiste: scrollt eigenständig, Kopf und Fuß bleiben */ .side-head,.side-foot{flex:0 0 auto} @media(min-width:1001px){ .admin-side{height:100vh;position:sticky;top:0} } @media(max-width:860px){.split{grid-template-columns:1fr;gap:24px}} .kontakt-block{display:grid;gap:14px;margin:20px 0 8px} .kontakt-block p{margin:0} .kontakt-block b{font-size:.82rem;color:var(--ink-soft);font-weight:600} /* Kontoseiten */ .konto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:24px;align-items:start} .h-klein{font-size:1.25rem;margin-bottom:14px} .konto-hilfe summary{cursor:pointer;font-weight:600;font-size:.9rem;padding:8px 0;color:var(--lake)} .konto-hilfe summary:hover{text-decoration:underline} .konto-hilfe .field{margin-top:10px} .konto-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start; border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--mist);margin-bottom:24px} .konto-status.warn{background:#FEF6EC;border-color:#E7C79B} .konto-status-text b{display:block;font-size:1.02rem} .konto-status-text p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-soft);max-width:62ch} .konto-status-tat{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:flex-end} .adresse-aendern summary{cursor:pointer;font-size:.84rem;color:var(--lake);padding:9px 14px; border:1px solid var(--line);border-radius:999px;background:var(--panel);white-space:nowrap;list-style:none} .adresse-aendern summary::-webkit-details-marker{display:none} .adresse-aendern summary:hover{border-color:var(--lake)} .adresse-aendern[open]{flex:1 1 260px} .adresse-aendern[open] summary{margin-bottom:10px} @media(max-width:700px){ .konto-status{grid-template-columns:1fr} .konto-status-tat{justify-content:flex-start} } /* Speichern am Ende jedes Einstellungskastens */ .karten-speichern{display:flex;flex-wrap:wrap;gap:12px;align-items:center; margin-top:20px;padding-top:14px;border-top:1px dashed var(--line)} .karten-speichern .muted{font-size:.78rem} /* ========================================================= Zeitraumauswahl — Website und Verwaltung ========================================================= */ .rp{position:relative;margin-bottom:16px} .rp-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .rp-field{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 16px; border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer; font-family:var(--body);text-align:left;transition:border-color .15s,box-shadow .15s} .rp-field:hover{border-color:var(--lake)} .rp-field.filled{border-color:var(--lake);box-shadow:inset 0 0 0 1px rgba(37,107,124,.18)} .rp-icon svg{width:20px;height:20px;fill:none;stroke:var(--lake);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rp-text{display:flex;flex-direction:column;gap:1px;min-width:0} .rp-text b{font-size:.98rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rp-text em{font-style:normal;font-size:.78rem;color:var(--ink-soft)} .rp-text.rp-leer b{color:var(--ink-soft);font-weight:500} .rp-admin .rp-field{min-height:48px;padding:8px 14px} .rp-admin .rp-text b{font-size:.9rem} /* Wichtig: „display:flex" unten übersteuert das hidden-Merkmal des Browsers. Ohne diese Zeile steht das Kalenderfenster dauerhaft als leerer Kasten in der Seite. */ .rp-pop[hidden]{display:none} .rp-pop{position:absolute;z-index:120;top:calc(100% + 8px);left:0;min-width:min(700px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 24px 56px -20px rgba(20,35,42,.5);display:flex;flex-direction:column;overflow:hidden;scrollbar-width:thin} /* Nur die Monate scrollen — Kopfzeile, Legende, Schnellauswahl und Schaltflächen bleiben immer sichtbar. Sonst rutscht die Legende aus dem Bild. */ .rp-pop .rp-months{overflow-y:auto;min-height:0;flex:0 0 auto;padding-right:2px} /* Nur wenn wirklich begrenzt wird, darf die Monatsfläche schrumpfen */ .rp-pop[style*="max-height"] .rp-months{flex:1 1 auto} .rp-pop .rp-head,.rp-pop .rp-legend,.rp-pop .rp-chips,.rp-pop .rp-foot{flex:0 0 auto} .rp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .rp-state{text-align:center;line-height:1.3} .rp-state b{display:block;font-size:.98rem} .rp-state span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px} .rp-nav{width:40px;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:10px; font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink);flex:0 0 auto} .rp-nav:hover{border-color:var(--lake);color:var(--lake)} .rp-months{display:grid;grid-template-columns:1fr;gap:22px} @media(min-width:720px){.rp-months{grid-template-columns:1fr 1fr}} .rp-month h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-soft);margin:0 0 10px;text-align:center} .rp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .rp-wd{font-size:.66rem;text-align:center;color:var(--ink-soft);font-family:var(--mono);padding-bottom:6px} .rp-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; aspect-ratio:1;min-height:40px;border:0;border-radius:10px;background:#E8F1EC;color:var(--ink); font-family:var(--body);cursor:pointer;padding:0;transition:background .12s} .rp-day b{font-size:.88rem;font-weight:600;line-height:1} .rp-day i{font-style:normal;font-family:var(--mono);font-size:.58rem;color:var(--ink-soft);line-height:1} .rp-day:hover:not(:disabled){background:#CFE4DA} .rp-day:disabled{cursor:not-allowed} .rp-day.past{background:transparent;color:#B4C0C4} .rp-day.past i{display:none} .rp-day.busy{background:#F4DDD5;color:#A8654F;text-decoration:line-through} .rp-day.busy i{display:none} .rp-day.wechsel{background:linear-gradient(135deg,#F4DDD5 0 50%,#E8F1EC 50% 100%);color:var(--ink)} .rp-day.between{background:#BFDDE3;border-radius:0} .rp-day.start,.rp-day.end{background:var(--lake);color:#fff} .rp-day.start i,.rp-day.end i{color:rgba(255,255,255,.85)} .rp-day.start{border-radius:10px 0 0 10px} .rp-day.end{border-radius:0 10px 10px 0} .rp-day.start.end{border-radius:10px} .rp-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.76rem;color:var(--ink-soft);margin-top:16px;padding-top:14px;border-top:1px solid var(--line);margin-top:14px} .rp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px} .k-wechsel{background:linear-gradient(135deg,#F4DDD5 0 50%,#E8F1EC 50% 100%)} .rp-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:14px; border-top:1px solid var(--line)} .rp-chips-label{width:100%;font-size:.76rem;color:var(--ink-soft);margin-bottom:2px} .rp-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} @media(max-width:700px){ .rp-pop{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;overflow-y:auto;min-width:0; border-radius:20px 20px 0 0;z-index:140;padding:16px 14px 20px} .rp-day{min-height:44px} body.rp-offen{overflow:hidden} .rp-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(12,22,27,.45);z-index:130} .rp-foot .btn{flex:1} } /* Meldung nach dem Absenden kurz hervorheben */ .note-blitz{animation:notePuls 1.4s ease-out 1} @keyframes notePuls{ 0%{box-shadow:0 0 0 0 rgba(37,107,124,.45)} 70%{box-shadow:0 0 0 12px rgba(37,107,124,0)} 100%{box-shadow:0 0 0 0 rgba(37,107,124,0)} } @media(prefers-reduced-motion:reduce){.note-blitz{animation:none}} /* Anker nicht unter der klebenden Kopfzeile verstecken */ :target{scroll-margin-top:90px} .rp,.field,h2,h3,form{scroll-margin-top:90px} /* Abweichende Rechnungsanschrift */ .rechnung-abweichend{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:6px 0 18px;background:#FBFCFC} .rechnung-abweichend summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--lake)} .rechnung-abweichend summary:hover{text-decoration:underline} .rechnung-abweichend[open] summary{margin-bottom:8px} .rechnung-abweichend .check{margin:10px 0 14px} /* Installationsassistent */ .inst{max-width:760px;margin:0 auto;padding:40px 20px} .step{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--lake);background:var(--mist);border-radius:999px;padding:5px 12px;margin-bottom:12px} .checks{list-style:none;margin:14px 0;padding:0} .checks li{padding:8px 0;border-top:1px solid var(--line);font-size:.9rem;display:flex;gap:10px;align-items:baseline} .checks li:first-child{border-top:0} /* Schnellauswahl direkt unter dem Zeitraumfeld */ .rp-quick{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px} .rp-quick-label{font-size:.78rem;color:var(--ink-soft);margin-right:2px} .rp-quick .chip{min-height:34px;padding:6px 12px;font-size:.8rem} @media(max-width:520px){ .rp-quick{gap:6px} .rp-quick .chip{flex:1 1 auto;justify-content:center;text-align:center} } /* Kalender der Hausseite: begrenzte Länge mit Erweiterung */ .cal-mehr{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px} /* Nach-oben-Knopf in der Verwaltung — rechts, außerhalb der Seitenleiste */ .to-top-admin{right:26px;bottom:26px} @media(max-width:1000px){.to-top-admin{right:14px;bottom:14px}} @media(max-width:620px){.to-top-admin span{display:none}} /* ========================================================= Bewertungen und Gästebuch ========================================================= */ .bewertung-kopf{display:flex;gap:20px;align-items:center;background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:20px 24px;margin:24px 0 28px} .bw-note{text-align:center;padding-right:20px;border-right:1px solid var(--line)} .bw-note b{display:block;font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--lake)} .bw-note span{font-size:.78rem;color:var(--ink-soft)} .bw-sterne{color:var(--larch);letter-spacing:2px;font-size:1rem} .bw-sterne.gross{font-size:1.4rem} .bw-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px} .bw-liste.kompakt{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:18px} .bw-karte{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px} .bw-karte header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} .bw-karte h3,.bw-karte h4{margin:6px 0 8px;font-size:1.02rem} .bw-karte p{margin:0;font-size:.94rem;line-height:1.6} .bw-karte footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} .bw-antwort{margin-top:14px;padding:14px 16px;background:var(--mist);border-radius:12px} .bw-antwort b{display:block;font-size:.82rem;color:var(--lake);margin-bottom:4px} .bw-antwort p{font-size:.9rem} /* Sterneauswahl: von rechts nach links, damit das Überfahren funktioniert */ .sterne-wahl{display:inline-flex;flex-direction:row-reverse;gap:4px} .sterne-wahl input{position:absolute;opacity:0;width:1px;height:1px} .sterne-wahl label{font-size:2rem;line-height:1;color:#D8DFE1;cursor:pointer;transition:color .12s} .sterne-wahl label:hover,.sterne-wahl label:hover ~ label, .sterne-wahl input:checked ~ label{color:var(--larch)} .sterne-wahl input:focus-visible + label{outline:3px solid var(--lake);outline-offset:2px;border-radius:4px} .sr{position:absolute;left:-9999px} .vorlagen-wahl{margin-bottom:8px;font-size:.85rem;max-width:280px} /* Ersatzcodes und Geheimnis */ .codes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .codes code{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px; font-family:var(--mono);font-size:.9rem;letter-spacing:.06em} .codes.gross code{font-size:1.05rem;padding:12px 16px} .foot-newsletter{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; border-top:1px solid rgba(255,255,255,.12);padding:18px 0;margin-top:8px} .foot-newsletter b{display:block;font-size:.95rem} .rp-quick-hinweis{width:100%;font-size:.78rem;color:#A8683C;margin-top:2px} .rp-chips-label.warn{color:#A8683C} /* Hinweis, dass eine serverseitige Liste veraltet ist */ .alt-hinweis[hidden]{display:none} .alt-hinweis{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between; border:1px dashed #C98A5E;background:rgba(201,138,94,.07);border-radius:12px;padding:12px 16px;margin-bottom:14px} .alt-hinweis span{font-size:.86rem;color:#A8683C;flex:1 1 240px} /* ========================================================= Buchung in drei Schritten ========================================================= */ .wizard-steps{display:flex;gap:0;list-style:none;margin:0 0 26px;padding:0;counter-reset:s} .wizard-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative; font-size:.8rem;color:var(--ink-soft);text-align:center} .wizard-steps li::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0} .wizard-steps li:first-child::before{display:none} .wizard-steps li.fertig::before,.wizard-steps li.aktiv::before{background:var(--lake)} .wizard-steps .nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:50%;background:var(--panel);border:2px solid var(--line); font-family:var(--mono);font-size:.85rem;color:var(--ink-soft)} .wizard-steps li.aktiv .nr{background:var(--lake);border-color:var(--lake);color:#fff} .wizard-steps li.fertig .nr{background:var(--panel);border-color:var(--lake);color:var(--lake)} .wizard-steps li.aktiv .txt{color:var(--ink);font-weight:600} .wizard-steps a{color:inherit;display:flex;flex-direction:column;align-items:center;gap:6px} .wizard-steps a:hover .txt{color:var(--lake);text-decoration:underline} .wizard-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start} @media(min-width:900px){.wizard-grid{grid-template-columns:1fr 340px}} .wizard-summe .panel{position:sticky;top:90px} .summe-haus{margin:0 0 14px} .summary .trenn{border-top:1px solid var(--line);margin:6px 0;padding:0;height:0} .summary .gut span:last-child{color:#2E7D5B} .summary.kompakt{margin:14px 0} .fehlerliste{margin:6px 0 0 18px;padding:0} .fehlerliste li{margin-bottom:3px} /* Zahlungsart als Karten */ .zahlwahl{display:grid;gap:12px;margin-bottom:8px} .zahlkarte{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px; padding:14px 16px;cursor:pointer;background:var(--panel);transition:border-color .15s} .zahlkarte:hover{border-color:var(--lake)} .zahlkarte input{margin-top:3px;flex:0 0 auto} .zahlkarte input:checked ~ span b{color:var(--lake)} .zahlkarte:has(input:checked){border-color:var(--lake);box-shadow:inset 0 0 0 1px rgba(37,107,124,.2)} .zahlkarte b{display:block;font-size:.98rem;margin-bottom:2px} .zahlkarte em{font-style:normal;font-size:.84rem;color:var(--ink-soft);line-height:1.45} .btn.gross{padding:14px 26px;font-size:1rem} @media(max-width:560px){ .wizard-steps .txt{font-size:.7rem} .wizard-steps .nr{width:28px;height:28px} } /* Reisezweck und Feldmeldungen */ .reisezweck{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px} @media(max-width:520px){.reisezweck{grid-template-columns:1fr}} .zweck-karte{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:12px; padding:13px 15px;cursor:pointer;background:var(--panel);transition:border-color .15s} .zweck-karte:hover{border-color:var(--lake)} .zweck-karte:has(input:checked){border-color:var(--lake);box-shadow:inset 0 0 0 1px rgba(37,107,124,.2)} .zweck-karte input{margin-top:3px} .zweck-karte b{display:block;font-size:.95rem} .zweck-karte em{font-style:normal;font-size:.82rem;color:var(--ink-soft)} .feld-meldung{margin:6px 0 0;font-size:.82rem;line-height:1.4} .feld-meldung.fehler{color:#B4472F} .feld-meldung.hinweis{color:#A8683C} .feld-meldung .vorschlag{background:none;border:0;padding:0;font:inherit;color:var(--lake); text-decoration:underline;cursor:pointer} input.fehlerhaft,select.fehlerhaft,textarea.fehlerhaft{border-color:#D08A78;background:#FEF8F6} .spaeter{margin-top:18px} .spaeter summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--lake)} .spaeter summary:hover{text-decoration:underline} .spaeter[open] summary{margin-bottom:10px} /* Belegungsplan über lange Zeiträume */ .plan.kompakt .plan-tage{grid-template-columns:repeat(var(--spalten),minmax(15px,1fr))} .plan.kompakt{min-width:0} .plan.kompakt .plan-kopf .plan-tag{font-size:.58rem;padding:3px 0} .plan.kompakt .plan-kopf .plan-tag b{font-size:.6rem} .plan.kompakt .plan-zelle{min-height:34px} .plan.kompakt .plan-balken{font-size:.62rem;padding:3px 4px;min-height:24px;gap:3px;border-radius:5px} .plan.kompakt .plan-info{display:none} .plan.kompakt .plan-luecke{min-height:24px;font-size:.58rem} .plan.kompakt .plan-monat{font-size:.7rem;padding:4px 6px} /* ========================================================= Jahresübersicht je Haus ========================================================= */ .jahr-kopf{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:20px} .jahr-titel{font-family:var(--display);font-size:1.5rem;font-weight:700;padding:0 10px} .jahr-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel); padding:10px;margin-bottom:14px} .jahr{border-collapse:separate;border-spacing:2px;min-width:640px;width:100%} .jahr th{font-weight:600;font-size:.66rem;color:var(--ink-soft);font-family:var(--mono); padding:2px;text-align:center} .jahr th.jm{text-align:left;padding-right:10px;font-family:var(--body);font-size:.8rem;color:var(--ink); white-space:nowrap;position:sticky;left:0;background:var(--panel);z-index:2} .jahr th.jsum,.jahr td.jsum{font-family:var(--mono);font-size:.7rem;text-align:right;padding-left:8px; color:var(--ink-soft);white-space:nowrap} .jahr td{padding:0} .jt{width:20px;height:20px;border-radius:4px;background:#E8F1EC;position:relative} .jt a{display:block;width:100%;height:100%;border-radius:4px} .jt.we{background:#DCE7E9} .jt.vorbei{background:#F1F4F4} .jt.leer{background:transparent} .jt.fest{background:var(--lake)} .jt.anfrage{background:var(--larch)} .jt.sperre{background:#8795A0} .jt.sonst{background:#6B7C85} .jt.offen{box-shadow:inset 0 0 0 2px #B4472F} .jt.heute{outline:2px solid var(--ink);outline-offset:1px;z-index:1} .jt.ferien::after{content:'';position:absolute;left:2px;right:2px;bottom:1px;height:2px; background:var(--larch);border-radius:2px} .jt a:hover{filter:brightness(1.15);transform:scale(1.15)} @media(max-width:700px){ .jt{width:16px;height:16px} .jahr{min-width:560px} .jahr th.jm{font-size:.7rem} } /* ========================================================= Suchleiste — eine Zeile, Schnellauswahl darunter ========================================================= */ .search{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px; box-shadow:var(--shadow);margin-top:32px} .search-zeile{display:grid;grid-template-columns:minmax(0,1fr) 140px auto; grid-template-rows:auto auto;gap:10px 14px;align-items:end} .search-zeile > *{min-width:0} /* Erste Zeile: Zeitraum, Gäste, Schaltfläche — alle an derselben Unterkante. Zweite Zeile: die Schnellauswahl über die volle Breite. */ .search .rp{grid-column:1;grid-row:1;margin:0} .search-gaeste{grid-column:2;grid-row:1} .search-knopf{grid-column:3;grid-row:1} .search-zeile .rp-quick-zeile{grid-column:1 / -1;grid-row:2;margin:0} .search .field{margin-bottom:0} /* Die Zeitraumauswahl ersetzt beide Datumsfelder und nimmt deren Platz ein */ .search .rp-hidden{display:none} .search .rp-quick{margin-top:10px} .search-knopf .btn{white-space:nowrap;align-self:stretch} @media(max-width:860px){ .search-zeile{grid-template-columns:minmax(0,1fr) 130px} .search .rp{grid-column:1 / -1;grid-row:1} .search-zeile .rp-quick-zeile{grid-row:2} .search-gaeste{grid-column:1;grid-row:3} .search-knopf{grid-column:2;grid-row:3} } @media(max-width:560px){ .search{padding:14px} .search-zeile{grid-template-columns:1fr;gap:12px} .search .rp,.search-gaeste,.search-knopf,.search-zeile .rp-quick-zeile{ grid-column:1;grid-row:auto} .search-knopf .btn{width:100%} } /* ========================================================= Rasterkinder dürfen schrumpfen Ohne min-width:0 setzt ein Kind seine Mindestbreite durch und sprengt die Spalte — genau das hat die Suchleiste verschoben. ========================================================= */ .hero-inner > *, .split > *, .detail > *, .gallery > *, .steps > *, .search-zeile > *, .form-grid > *, .wizard-grid > *, .konto-grid > *, .bw-liste > *, .err-links > *, .stat-tiles > *, .tiles > *, .season-list > *, .datalist > *, .plan-row > *, .summary > *, .reisezweck > *, .zahlwahl > *, .jahr-kopf > *{min-width:0} .feld-meldung.gut{color:#2E7D5B} /* Rastervarianten für kompakte Formulare */ .form-grid.vier{grid-template-columns:.8fr .8fr 1.2fr 1.2fr;gap:14px} .form-grid.drei{grid-template-columns:1.4fr 1fr 1.2fr;gap:14px} .form-grid.abschluss{grid-template-columns:200px 1fr;gap:16px;align-items:end} .form-grid.abschluss .actions{margin-top:10px} @media(max-width:760px){ .form-grid.vier{grid-template-columns:1fr 1fr} .form-grid.drei{grid-template-columns:1fr 1fr} .form-grid.drei .field:last-child{grid-column:1 / -1} } @media(max-width:520px){ .form-grid.vier,.form-grid.drei{grid-template-columns:1fr 1fr} .form-grid.abschluss{grid-template-columns:1fr} } /* ========================================================= Startseite: Abschnitte mit Sprungmarken ========================================================= */ html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .anker-abschnitt{scroll-margin-top:84px} .seiten-nav{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.92); backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .seiten-nav .wrap{display:flex;gap:6px;overflow-x:auto;padding:0 24px;-webkit-overflow-scrolling:touch} .seiten-nav a{flex:0 0 auto;padding:13px 14px;font-size:.88rem;color:var(--ink-soft); border-bottom:2px solid transparent;white-space:nowrap} .seiten-nav a:hover{color:var(--lake);text-decoration:none} .seiten-nav a.aktiv{color:var(--lake);border-bottom-color:var(--lake);font-weight:600} @media(max-width:900px){.seiten-nav{top:58px}.seiten-nav .wrap{padding:0 16px}} /* Kontaktband am Seitenende */ .kontakt-band{background:var(--mist)} .kontakt-band .kontakt-lead,.kontakt-band .kontakt-tel, .kontakt-band .kontakt-neben,.kontakt-band .kontakt-tel a, .kontakt-band .kontakt-neben a{color:inherit} .kontakt-band-inner{display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center} /* Abschluss vor dem Fussbereich. Ein Handlungsaufruf, aber mit Gesicht: das Foto der Gastgeber macht aus einem Knopf ein Angebot. Rechts liegt das Logo als grosses, sehr blasses Wasserzeichen. */ .kontakt-band{position:relative;overflow:hidden} .kontakt-band::after{content:"";position:absolute;right:-70px;bottom:-90px;width:420px;height:420px; background:url("../img/logo-raja-hell.png") no-repeat center/contain;opacity:.07;pointer-events:none} .kontakt-band > .wrap{position:relative;z-index:1} .kontakt-schluss{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center; max-width:900px;margin:0 auto} .kontakt-portrait{margin:0;flex:none;width:190px;height:190px;border-radius:50%;overflow:hidden; box-shadow:0 0 0 6px rgba(255,249,238,.22), 0 18px 44px -18px rgba(0,0,0,.55)} .kontakt-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block} .kontakt-text .eyebrow.hell{margin-bottom:.7em} .kontakt-schluss h2{margin:0 0 .45em} .kontakt-schluss .kontakt-lead{margin:0 0 26px;max-width:46ch;font-size:1rem;line-height:1.68} .kontakt-tat{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .kontakt-haupt{min-width:210px} .kontakt-oder{font-size:.9rem;opacity:.72} .kontakt-tel{display:inline-flex;flex-direction:column;line-height:1.25;text-decoration:none} .kontakt-tel:hover{text-decoration:none} .kontakt-tel-klein{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.9} .kontakt-tel-nr{font-family:var(--mono);font-size:1.18rem;font-weight:600;white-space:nowrap; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px} .kontakt-tel:hover .kontakt-tel-nr{text-decoration-thickness:2px} .kontakt-neben{margin:16px 0 0;font-size:.86rem;opacity:.8} .kontakt-neben a{text-decoration:underline} .wa-link{display:inline-flex;align-items:center;gap:8px} .wa-zeichen{width:19px;height:19px;flex:none;fill:#25D366} .wa-zeichen .wa-hoerer{fill:#0F4B38} .kontakt-neben .wa-link span{text-decoration:underline} @media(max-width:820px){ .kontakt-schluss{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center} .kontakt-schluss .kontakt-lead{margin-left:auto;margin-right:auto} .kontakt-tat{justify-content:center} .kontakt-band::after{width:300px;height:300px;right:-90px;bottom:-110px;opacity:.06} } @media(max-width:600px){ .kontakt-portrait{width:150px;height:150px} .kontakt-haupt{width:100%;min-width:0} .kontakt-oder{display:none} } .kontakt-band-inner > *{min-width:0} .kontakt-band-tat{display:flex;flex-direction:column;gap:10px} @media(max-width:760px){ .kontakt-band-inner{grid-template-columns:1fr} .kontakt-band-tat{flex-direction:row;flex-wrap:wrap} } /* ========================================================= Einstellungen: Überblick, Suche, Sprungleiste ========================================================= */ .funktionsliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin-top:12px} .funktion{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line); border-radius:10px;color:var(--ink);background:var(--panel)} .funktion:hover{border-color:var(--lake);text-decoration:none} .funktion .ampel{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px;background:#C9D2D5} .funktion.an .ampel{background:#3E8E6B;box-shadow:0 0 0 3px rgba(62,142,107,.15)} .funktion .ftext{flex:1;min-width:0} .funktion b{display:block;font-size:.9rem;line-height:1.3} .funktion em{font-style:normal;font-size:.78rem;color:var(--ink-soft);display:block;margin-top:2px} .funktion .fstand{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;text-transform:uppercase; letter-spacing:.08em;color:var(--ink-soft);padding-top:3px} .funktion.an .fstand{color:#3E8E6B} .einst-leiste{position:sticky;top:0;z-index:30;background:var(--mist);padding:14px 0 10px;margin-bottom:6px} .einst-suche{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:0 12px} .einst-suche svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--ink-soft);stroke-width:1.8} .einst-suche input{border:0;background:none;padding:12px 0;flex:1;min-width:0;font-size:.95rem} .einst-suche input:focus{outline:none} .einst-suche:focus-within{border-color:var(--lake);box-shadow:0 0 0 3px rgba(37,107,124,.12)} .suche-weg{border:0;background:none;cursor:pointer;color:var(--ink-soft);font-size:1rem;padding:6px} .einst-nav{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px} .einst-nav a{font-size:.76rem;padding:5px 10px;border:1px solid var(--line);border-radius:999px; background:var(--panel);color:var(--ink-soft);white-space:nowrap} .einst-nav a:hover{border-color:var(--lake);color:var(--lake);text-decoration:none} .einst-treffer{font-size:.85rem;color:var(--ink-soft);margin:0 0 14px} @media(max-width:700px){ .einst-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px} } /* Kalender klappt nach oben auf, wenn unten kein Platz ist */ .rp-pop.mittig{position:fixed;top:50%;left:50%;right:auto;bottom:auto; transform:translate(-50%,-50%);z-index:140;width:min(700px,94vw);box-shadow:0 30px 80px -24px rgba(20,35,42,.6)} .rp-pop.oben{top:auto;bottom:calc(100% + 8px); box-shadow:0 -20px 56px -20px rgba(20,35,42,.5)} /* Beschriftung über dem Zeitraumfeld — gleiche Anmutung wie bei den übrigen Feldern */ .rp-label{display:block;font-size:.86rem;font-weight:600;color:var(--ink); margin-bottom:6px;line-height:1.35} /* Damit alle drei Bedienelemente der Suchleiste gleich hoch sind */ .search-gaeste select,.search-knopf .btn{min-height:58px} @media(max-width:560px){ .search-gaeste select,.search-knopf .btn{min-height:48px} } /* ========================================================= Feldzeilen — Ausrichtung durch Aufbau, nicht durch Nachhelfen Bisher war jedes Feld ein eigener Kasten mit Beschriftung darin. Ob die Beschriftungen fluchten, hing dann von Textlänge, Elementart und Innenabständen ab — deshalb die immer wiederkehrenden Versätze. Jetzt lösen sich die Feldkästen auf (display:contents). Beschriftungen liegen alle in Zeile 1 des Rasters, Bedienelemente in Zeile 2, Hinweise in Zeile 3. Das Raster erzwingt die Flucht — unabhängig davon, wie lang ein Text ist oder ob dort ein Eingabefeld oder eine Auswahl steht. ========================================================= */ .form-zeile{display:grid;gap:6px 14px;align-items:start;margin-bottom:16px; grid-auto-columns:minmax(0,1fr)} .form-zeile > *{min-width:0} .form-zeile .field{display:contents} /* display:contents hebelt das browsereigene [hidden] aus - ohne diese Zeile blieb „Alter der Kinder" auch bei null Kindern stehen. */ .form-zeile .field[hidden],.field[hidden],.form-zeile [hidden]{display:none} .form-zeile .field > label{grid-row:1;align-self:end;display:block;font-size:.78rem; font-weight:500;color:var(--ink-soft);line-height:1.35;margin:0 0 3px;letter-spacing:.01em} .form-zeile .field > input, .form-zeile .field > select, .form-zeile .field > textarea{grid-row:2;width:100%;margin:0} .form-zeile .field > .help, .form-zeile .field > .feld-meldung{grid-row:3;margin:4px 0 0;font-size:.78rem} .form-zeile .field > .check{grid-row:2} .form-zeile.zwei{grid-template-columns:repeat(2,minmax(0,1fr))} .form-zeile.drei{grid-template-columns:repeat(3,minmax(0,1fr))} .form-zeile.vier{grid-template-columns:repeat(4,minmax(0,1fr))} .form-zeile.eng{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} .form-zeile:not(.zwei):not(.drei):not(.vier):not(.eng){grid-template-columns:minmax(0,420px)} /* --------------------------------------------------------- Warum Hilfetexte bisher „ein Feld weiter" stehen konnten --------------------------------------------------------- Mit display:contents löst sich der Feld-Kasten auf; Beschriftung, Eingabefeld und Hilfetext wandern einzeln ins Raster. Der Browser führt dabei je Zeile einen eigenen Zähler. Fehlt bei EINEM Feld der Hilfetext, rutschen alle folgenden Hilfetexte eine Spalte nach links und stehen unter dem falschen Feld. Genau das war zu sehen. Mit subgrid bleibt jedes Feld ein einziger Rasterplatz und liefert seine drei Zeilen von innen — verrutschen ist damit unmöglich, ganz gleich, welches Feld einen Hilfetext hat und welches nicht. Ältere Browser bekommen weiterhin das bisherige Verhalten. --------------------------------------------------------- */ @supports (grid-template-rows: subgrid) { .form-zeile{grid-template-rows:auto auto auto} .form-zeile > *{grid-row:1 / span 3} .form-zeile .field{display:grid;grid-template-rows:subgrid;align-self:stretch} } /* --------------------------------------------------------- Schmale Bildschirme: Zeilenpaar- und Subgrid-Mechanik ganz abschalten. Beide pinnen Felder in feste Rasterzeilen — bei einer einzigen Spalte stapeln sich dadurch alle Beschriftungen übereinander (auf dem Handy live zu sehen: „SPtLaZße"). Hier gilt wieder das einfachste Modell der Welt: Beschriftung über Feld, volle Breite, ein Feld nach dem anderen. Steht bewusst NACH dem Subgrid-Block — Reihenfolge entscheidet. --------------------------------------------------------- */ @media(max-width:760px){ .form-zeile.vier,.form-zeile.drei{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none} .form-zeile.vier > *,.form-zeile.drei > *{grid-row:auto} .form-zeile.vier .field,.form-zeile.drei .field{display:block} .form-zeile.vier .field > label,.form-zeile.drei .field > label{margin:0 0 3px} } @media(max-width:520px){ .form-zeile,.form-zeile.vier,.form-zeile.drei,.form-zeile.zwei,.form-zeile.eng{ grid-template-columns:1fr;grid-template-rows:none;gap:0} .form-zeile > *{grid-row:auto} .form-zeile .field{display:block} .form-zeile .field > label{margin:12px 0 3px} .form-zeile .field:first-child > label{margin-top:0} .form-zeile .field > input, .form-zeile .field > select, .form-zeile .field > textarea{width:100%} .form-zeile .rp{display:block} .form-zeile .rp > .rp-label,.form-zeile .rp > .rp-field,.form-zeile .rp > .rp-pop{grid-row:auto} } /* Wochenenden, Feiertage und Ferien im Zeitraumkalender */ .rp-day.we:not(.busy):not(.start):not(.end):not(.between){ background:#CEDFE3;box-shadow:inset 0 0 0 1px rgba(37,107,124,.14)} /* Sa und So auch in der Kopfzeile absetzen */ .rp-wd:nth-child(6),.rp-wd:nth-child(7){color:var(--lake);font-weight:700} .rp-day.feiertag{position:relative;box-shadow:inset 0 0 0 2px rgba(180,71,47,.45)} .rp-day.feiertag::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%); width:6px;height:6px;border-radius:50%;background:#B4472F} .rp-day.ferienzeit::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%); width:12px;height:3px;border-radius:2px;background:var(--larch)} .rp-day.ferienzeit{position:relative} .rp-day.start.feiertag::after,.rp-day.end.feiertag::after{background:#fff} .rp-day.start.ferienzeit::after,.rp-day.end.ferienzeit::after{background:rgba(255,255,255,.8)} .k-feiertag{background:#B4472F;border-radius:50%;box-shadow:0 0 0 2px rgba(180,71,47,.3)} /* Rechenaufgabe als Auswahl — antippen statt tippen */ .captcha-wahl{border:0;padding:0;margin:0;min-width:0} .captcha-wahl legend{padding:0;font-size:.86rem;font-weight:600;color:var(--ink); line-height:1.35;margin-bottom:8px} .captcha-optionen{display:flex;gap:8px;flex-wrap:wrap} .captcha-option{position:relative;display:block} .captcha-option input{position:absolute;opacity:0;width:1px;height:1px} .captcha-option span{display:flex;align-items:center;justify-content:center; min-width:64px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px; background:var(--panel);font-family:var(--mono);font-size:1.05rem;color:var(--ink); cursor:pointer;transition:border-color .12s,background .12s} .captcha-option span:hover{border-color:var(--lake)} .captcha-option input:checked + span{border-color:var(--lake);background:var(--lake);color:#fff} .captcha-option input:focus-visible + span{outline:3px solid var(--lake);outline-offset:2px} .captcha-wahl .help{margin-top:8px} @media(max-width:520px){ .captcha-optionen{gap:6px} .captcha-option span{min-width:56px;flex:1} } @media(max-width:700px){ .rp-pop{display:flex;flex-direction:column} .rp-pop .rp-months{max-height:46vh} } /* ========================================================= Abschlusszeile eines Formulars Links die Sicherheitsfrage, rechts Haken und Schaltfläche. Passt es nicht nebeneinander, rutscht der rechte Teil darunter — ohne dass Text auf ein Wort je Zeile zusammengequetscht wird. ========================================================= */ /* ========================================================= Formularkopf und Abschluss Überschrift deutlich stärker als die Feldbeschriftungen, damit der Blick eine Ordnung findet. ========================================================= */ .form-kopf{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)} .form-kopf h2{font-family:var(--display);font-size:1.5rem;font-weight:800;margin:0 0 6px;line-height:1.2} .form-kopf p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.55} /* ========================================================= Abschluss eines Formulars — alles untereinander Rechenaufgabe, dann die Zustimmung, dann die Schaltfläche. Eine Spalte liest sich als klare Reihenfolge; nebeneinander sucht der Blick, was zuerst dran ist. ========================================================= */ .absenden{display:flex;flex-direction:column;align-items:flex-start;gap:16px; border-top:1px solid var(--line);margin-top:24px;padding-top:20px} .absenden > *{min-width:0;max-width:100%} .absenden .check{margin:0} .absenden-tat{width:100%} .absenden-tat .btn{min-height:52px;padding-left:30px;padding-right:30px} @media(max-width:560px){ .absenden{gap:14px} .absenden-tat .btn{width:100%} } /* Schmales Feld für kurze Auswahlen */ .feld-schmal-drittel{max-width:340px} /* E-Mail-Texte: Vorschau der Signatur */ .codeblock{background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:14px 16px; font-family:var(--mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap;margin:10px 0;overflow-x:auto} /* Passwort vergessen: zwei getrennte Wege */ .passwort-weg{margin-top:18px;border-top:1px solid var(--line);padding-top:16px} .passwort-weg summary{cursor:pointer;font-weight:600;color:var(--lake)} .passwort-weg[open] summary{margin-bottom:12px} .weg-block{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px; background:var(--panel)} .weg-block .actions{margin-top:10px} /* Besucherverlauf */ .verlauf{display:flex;align-items:flex-end;gap:3px;height:150px;margin:16px 0 10px; padding-bottom:22px;padding-top:18px;box-sizing:border-box;position:relative} .verlauf-tag{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end; position:relative} .verlauf-tag span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:.62rem; color:var(--ink-soft);font-family:var(--mono)} .verlauf-balken{background:var(--lake);border-radius:4px 4px 0 0;min-height:2px;transition:filter .12s; position:relative} /* Skala links und Werte am Balken (v1.127.68) */ .verlauf-wrap{display:flex;align-items:stretch;gap:9px;margin:16px 0 10px} .verlauf-wrap .verlauf{flex:1;min-width:0;margin:0} .verlauf-skala{display:flex;flex-direction:column;justify-content:space-between;height:150px; padding-bottom:22px;padding-top:18px;box-sizing:border-box;min-width:24px;text-align:right; font-family:var(--mono);font-size:.62rem;color:var(--ink-soft);line-height:1} .verlauf{background-image:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px), var(--line) calc(25% - 1px),var(--line) 25%);background-origin:content-box;background-clip:content-box} /* Zahl immer über dem Balken und fett – einheitliches Bild (v1.127.69) */ .verlauf-wert{position:absolute;bottom:100%;left:0;right:0;text-align:center;font-family:var(--mono); font-size:.6rem;font-weight:700;color:var(--ink);padding-bottom:3px;line-height:1} .verlauf-tag.we .verlauf-balken{background:#7FA8B4} .verlauf-tag.heute .verlauf-balken{background:var(--larch)} .verlauf-tag:hover .verlauf-balken{filter:brightness(1.15)} @media(max-width:700px){ .chart-wert,.chart-kosten{display:none} .verlauf{height:110px} .verlauf-skala{height:110px} .verlauf-wert{display:none} /* zu schmal für Zahlen an 30 Balken */ .verlauf-tag span{display:none} .verlauf-tag.heute span{display:block} } /* Der Nach-oben-Knopf weicht der Fußzeile aus */ .to-top.tiefer{transform:translateY(-64px)} @media(max-width:700px){.to-top.tiefer{transform:translateY(-56px)}} footer .fine{padding-bottom:8px} /* Editor: sichtbares Ziel beim Hineinziehen von Bildern */ .ed-body.ed-ziel{outline:2px dashed var(--lake);outline-offset:-4px;background:rgba(37,107,124,.05)} .ed-body figure[data-upload] figcaption{color:var(--ink-soft);font-style:italic} /* Reisezweck in der Verwaltung — schmaler als auf der Website */ .reisezweck-schmal{display:flex;gap:8px;flex-wrap:wrap} .reisezweck-schmal .zweck-karte{flex:1 1 200px;min-width:0} /* Kalenderkopf: feste Höhe, damit lange Feiertagsnamen das Bild nicht springen lassen */ .rp-head{min-height:56px;align-items:flex-start} .rp-head b,.rp-head .rp-titel{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* Handbuchung: Optionen als ordentliche Spalte statt verstreuter Häkchen */ .opt-spalte{display:flex;flex-direction:column;gap:6px;align-items:flex-start} /* Einstellungsraster: Hilfetexte bleiben unter ihrem Feld, Felder oben ausgerichtet */ .admin-form .form-zeile{align-items:start} .admin-form .form-zeile .field{min-width:0} /* ========================================================= 1.68.x — Handbuchung, Gastauswahl, Bildgrößen, Sortierung ========================================================= */ /* --- Handbuchung: Kopfzeile Haus | Zeitraum | Art --------- Die beiden alten Datumsfelder sind ausgeblendet; der Kalender nimmt ihren Platz ein. Damit dabei keine leere vierte Spalte stehen bleibt, hat die Kopfzeile ein eigenes Raster. */ .form-zeile.hb-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr)} @media(max-width:760px){.form-zeile.hb-kopf{grid-template-columns:1fr 1fr} .form-zeile.hb-kopf .rp{grid-column:1 / -1}} @media(max-width:520px){.form-zeile.hb-kopf{grid-template-columns:1fr}} /* Der Kalender ist ein Rasterplatz wie ein Feld: Beschriftung oben, Schaltfläche darunter, Hinweiszeile darunter. */ .form-zeile .rp{margin-bottom:0;display:flex;flex-direction:column;justify-content:flex-end} @supports (grid-template-rows: subgrid){ .form-zeile .rp{display:grid;grid-template-rows:subgrid;align-self:stretch} .form-zeile .rp > .rp-label{grid-row:1;align-self:end} .form-zeile .rp > .rp-field{grid-row:2} .form-zeile .rp > .rp-pop{grid-row:3;align-self:start} } .rp-admin .rp-label{display:block;font-size:.78rem;font-weight:500;color:var(--ink-soft); line-height:1.35;margin:0 0 3px;letter-spacing:.01em} .rp-admin .rp-field{min-height:42px;padding:6px 12px;gap:9px} .rp-admin .rp-icon svg{width:17px;height:17px} .rp-admin .rp-text b{font-size:.86rem} .rp-admin .rp-text em{font-size:.72rem} /* Kompakteres Raster für das gesamte Handbuchungsformular */ .hb-form .form-zeile{margin-bottom:10px} .hb-form .form-zeile:last-of-type{margin-bottom:4px} .hb-form .opt-spalte{gap:4px} /* Feld mit begrenzter Breite — ersetzt ein style-Attribut (CSP) */ .field-mittel{max-width:760px} /* --- Schnellauswahl „Bestehender Gast" ------------------- */ .gast-box{position:relative;grid-row:2} .gast-box input{width:100%;margin:0} .gast-treffer{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);max-height:280px; overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:0 18px 40px -18px rgba(20,35,42,.45);padding:4px} .gast-treffer[hidden]{display:none} .gast-treffer button{display:block;width:100%;text-align:left;background:none;border:0; border-radius:8px;padding:7px 10px;cursor:pointer;font:inherit;color:var(--ink)} .gast-treffer button:hover,.gast-treffer button.aktiv{background:var(--mist)} .gast-treffer b{display:block;font-size:.9rem;font-weight:600} .gast-treffer span{display:block;font-size:.76rem;color:var(--ink-soft)} .gast-treffer .leer{padding:9px 10px;font-size:.82rem;color:var(--ink-soft)} .gast-uebernommen{font-size:.78rem;color:var(--ok);margin:4px 0 0} /* --- Buchungsliste: Spaltenköpfe zum Sortieren ----------- */ th.sort{padding:0} th.sort a{display:flex;align-items:center;gap:5px;width:100%;padding:11px 10px; color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit} th.sort a:hover{color:var(--lake)} th.sort .pfeil{font-size:.9em;opacity:.28;line-height:1} th.sort.an a{color:var(--lake)} th.sort.an .pfeil{opacity:1} th.sort.num a{justify-content:flex-end} /* --- Editor: Bildgröße nachträglich ändern --------------- */ .ed-body{position:relative} .ed-bildleiste{position:absolute;z-index:70;display:flex;flex-wrap:wrap;gap:4px;padding:5px; background:var(--panel);border:1px solid var(--line);border-radius:11px; box-shadow:0 14px 34px -16px rgba(20,35,42,.5)} .ed-bildleiste[hidden]{display:none} .ed-bildleiste button{background:none;border:1px solid transparent;border-radius:7px; padding:5px 9px;font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;white-space:nowrap} .ed-bildleiste button:hover{background:var(--mist)} .ed-bildleiste button.an{background:var(--lake);border-color:var(--lake);color:#fff} .ed-bildleiste .trenner{width:1px;align-self:stretch;background:var(--line);margin:2px 3px} .ed-bildleiste button.weg{color:var(--bad)} /* Neue Bildgröße: halbe Breite, mittig */ .prose .img-half,.ed-body .img-half{max-width:50%;margin-left:auto;margin-right:auto} @media(max-width:640px){.prose .img-half,.ed-body .img-half{max-width:100%}} /* Ersatzklassen für entfernte style-Attribute (CSP) */ .mt8{margin-top:8px}.mt10{margin-top:10px} p.small.mt8{margin:8px 0 0} .help.hilfe-eng{margin-top:2px} .chart-legend i.legende-erloes{background:var(--lake)} .chart-legend i.legende-kosten{background:#E4B7A6} .form-zeile.zwei-eng{grid-template-columns:minmax(0,1fr) 110px} @media(max-width:520px){.form-zeile.zwei-eng{grid-template-columns:1fr}} /* --------------------------------------------------------- Kalender-Flackern am 31.10. — die tatsächliche Wurzel --------------------------------------------------------- Feiertage, die nicht überall gelten, tragen einen langen Namen („Reformationstag — nur in Brandenburg, Bremen, …"). Die Kopfmitte ist ein Flex-Element und weigert sich ohne min-width:0, unter ihre Textbreite zu schrumpfen — die Kürzung mit „…" aus 1.67.7 kam also nie zum Zug. Stattdessen drückte der Name den ganzen Kalender breit, die Tageszellen wurden größer, der Tag unterm Zeiger rutschte weg, der Nachbar (kurzer Name) ließ alles zurückschnappen: Endlosschleife. Der 3.10. gilt überall (kurzer Name) und flackerte deshalb nie. min-width:0 lässt die Mitte schrumpfen und die „…"-Kürzung greifen; die feste Breite hält den Kalender zusätzlich unabhängig vom Inhalt. --------------------------------------------------------- */ .rp-head{min-width:0} .rp-head .rp-state{flex:1 1 auto;min-width:0;overflow:hidden} .rp-head .rp-nav{flex:0 0 auto} .rp-state b,.rp-state span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .rp-pop{width:min(700px,94vw);max-width:94vw} @media(max-width:700px){.rp-pop{width:auto}} .tag.warn{color:#7A4E12} /* --------------------------------------------------------- Belegungsplan überarbeitet --------------------------------------------------------- Balken und Lücken liegen jetzt in einer eigenen Deckschicht über den Tageszellen. Vorher verdrängten sie die Zellen in eine zweite Rasterzeile — das erzeugte die doppelt hohen Zeilen mit totem Leerraum darunter und verschluckte die Wochenend-Tönung hinter den Balken. --------------------------------------------------------- */ .plan-lage{position:absolute;inset:0;display:grid; grid-template-columns:repeat(var(--spalten),minmax(26px,1fr));pointer-events:none} .plan.kompakt .plan-lage{grid-template-columns:repeat(var(--spalten),minmax(15px,1fr))} .plan-lage .plan-balken,.plan-lage .plan-luecke{pointer-events:auto} /* Ruhigeres Raster: Tageslinien nur angedeutet, Wochenenden als Fläche, Monatswechsel als kräftige Linie durch alle Zeilen */ .plan-zelle{min-height:44px;border-right:1px solid rgba(31,45,51,.05)} .plan-zelle.we{background:#F3F6F6} .plan-zelle.ferien{box-shadow:inset 0 -3px 0 rgba(201,138,94,.55)} .plan-zelle.mstart,.plan-kopf .plan-tag.mstart{border-left:2px solid var(--line)} .plan-zelle.heute{background:rgba(37,107,124,.12);box-shadow:inset 2px 0 0 var(--lake),inset -1px 0 0 rgba(37,107,124,.35)} /* Balken: mittig in der Zeile, Text läuft nie heraus */ .plan-balken{min-height:30px;display:flex;align-items:center;gap:6px; box-shadow:0 1px 2px rgba(20,35,42,.25)} .plan-balken .plan-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .plan-balken .plan-info{margin-left:auto;flex:0 0 auto;opacity:.85;font-size:.66rem} .plan-luecke{display:flex;align-items:center;justify-content:center} /* Hausspalte: Zeile hebt sich beim Überfahren, Name bleibt lesbar */ .plan-row:hover .plan-haus{background:var(--mist)} /* Direkteingabe im Kalender: Anreise und Abreise tippen statt klicken */ .rp-direkt{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:10px 18px;border-top:1px solid var(--line)} .rp-direkt span{font-size:.78rem;color:var(--ink-soft)} .rp-direkt-pfeil{color:var(--ink-soft)} .rp-direkt input[type=date]{flex:0 1 150px;min-width:130px;margin:0;padding:7px 9px; font-size:.85rem;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)} .rp-direkt input[type=date]:focus{outline:2px solid var(--lake);outline-offset:1px} @media(max-width:700px){.rp-direkt{padding:10px 14px}.rp-direkt input[type=date]{flex:1 1 120px}} /* Ferien-Legende: Kürzel raus, aufklappbare Länderliste rein */ .cal-legend .cal-laender{display:inline-block} .cal-legend .cal-laender summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px} .cal-legend .cal-laender summary::-webkit-details-marker{display:none} .cal-laender-zahl{font-size:.72rem;color:var(--ink-soft);border:1px solid var(--line); border-radius:999px;padding:1px 8px} .cal-laender[open] .cal-laender-zahl{background:var(--mist)} .cal-laender-liste{display:block;margin-top:6px;font-size:.78rem;color:var(--ink-soft);max-width:560px;line-height:1.5} /* Freie Tage unter Mindestaufenthalt: sichtbar frei, aber gedeckt schraffiert */ .cal-day.free.kurz{background:repeating-linear-gradient(135deg,#EAF3EC 0 6px,#F6FAF7 6px 12px);color:var(--ink-soft)} .cal-day.free.kurz i{opacity:.65} .k-kurz{background:repeating-linear-gradient(135deg,#EAF3EC 0 4px,#F6FAF7 4px 8px)} /* Kinder im Assistenten: Altersreihe + Ausstattungs-Vorschläge */ /* ---- Reisegruppe ----------------------------------------------------------- Nutzt die Huelle der Zeitraumauswahl (.rp): Knopf plus Aufklappfeld. Hier nur, was im Inneren anders ist. */ /* Waehrend die Auskunft laeuft, den alten Preis nicht wegblitzen lassen — nur leicht zuruecknehmen, damit klar ist: da kommt gleich etwas Neues. */ .preis-laedt{opacity:.55;transition:opacity .15s ease} .rg-pop{padding:18px;min-width:0;left:0;right:0;width:auto;max-width:100%} /* Kein Platz nach unten: nach oben klappen statt aus dem Bild laufen */ .rp-pop.rg-oben{top:auto;bottom:calc(100% + 8px)} /* Reicht der Platz nicht, wird innen gescrollt statt aus dem Bild zu laufen */ .rg-pop{overflow-y:auto} /* Fortschritt sichtbar zaehlen statt unbestimmt wandern */ .progress-track .progress-fill{transition:width .2s linear} .progress-pct{font-variant-numeric:tabular-nums;font-weight:600} .rg-pop .reisegruppe{margin:0} .rg-pop .form-zeile{margin-bottom:12px} .rg-pop .kinder-alter{margin-bottom:4px} /* Alter zweispaltig: Bei fuenf Kindern war das Aufklappfeld sonst so hoch, dass es nicht mehr auf den Bildschirm passte. */ .rg-pop .kinder-alter-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px} .rg-pop .kinder-alter-liste select{flex:none;min-width:0;width:100%} @media(max-width:400px){.rg-pop .kinder-alter-liste{grid-template-columns:1fr}} /* „Übernehmen" klebt am unteren Rand des Aufklappfelds. Damit ist der Knopf erreichbar, egal wie viele Altersreihen darüber stehen und egal, ob innen gescrollt werden muss — statt die Höhe fein auszurechnen. */ .rg-fuss{display:flex;justify-content:flex-end;margin-top:10px; border-top:1px solid var(--line);padding-top:10px; position:sticky;bottom:-18px;background:var(--panel); margin-bottom:-18px;padding-bottom:12px} /* Fehlt ein Kinderalter, ist der Preis noch nicht endgueltig — das gehoert an den Knopf, nicht in eine Meldung weiter unten. */ /* Fehlt ein Kinderalter, ist das kein Hinweis, sondern ein Hindernis — es haelt die Buchung an. Deshalb die Fehlerfarbe, nicht der gedeckte Warnton. */ .rp-field.rg-offen,.rp-field.filled.rg-offen{border-color:var(--bad); box-shadow:inset 0 0 0 1px rgba(180,71,47,.25)} .rp-field.rg-offen .rp-text em{color:var(--bad);font-weight:600} .rg-meldung{margin:10px 0 0;padding:8px 10px;border-radius:8px; background:var(--bad-bg);color:var(--bad);font-weight:600} .rg-meldung[hidden]{display:none} /* Das noch offene Auswahlfeld selbst kennzeichnen, damit man nicht sucht */ .kinder-alter-liste select.rg-fehlt{border-color:var(--bad); box-shadow:inset 0 0 0 1px rgba(180,71,47,.25)} /* Ohne JavaScript bleiben die Auswahlfelder stehen und brauchen ihren Platz */ .reisegruppe{margin-bottom:16px} .kinder-alter{margin-bottom:16px} .haustier-feld{margin-bottom:16px} .kinder-alter-liste{display:flex;flex-wrap:wrap;gap:8px} .kinder-alter-liste select{flex:1 1 150px;min-width:140px} .kinder-extras .field .help{margin-top:2px} /* Personen-Karten im Meldeschein: Unterzeile klein und gedeckt statt Titelbrei */ .panel > h3 .sub{display:block;font-family:var(--body);font-weight:400;font-size:.82rem; color:var(--ink-soft);margin-top:2px;letter-spacing:0} /* "Was zeichnet uns aus" – drei Kacheln (v1.127.70) */ .vorzuege-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:8px} .vorzug-karte{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px} .vorzug-karte h3{margin:0 0 10px;font-size:1.08rem} .vorzug-karte p{margin:0;font-size:.94rem;line-height:1.6} @media(max-width:800px){.vorzuege-grid{grid-template-columns:1fr}} /* Hero-Video und Video-Bausteine (v1.127.73) */ .hero-video{width:100%;height:100%;object-fit:cover;border-radius:var(--r);display:block; aspect-ratio:4/3;background:var(--mist)} .hero-art{overflow:hidden;border-radius:var(--r)} .video-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:20px 0} .video-galerie figure{margin:0} .video-galerie video{width:100%;border-radius:var(--r);display:block;background:var(--mist);aspect-ratio:16/9;object-fit:cover} .video-galerie figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:8px} .video-block{margin:28px 0} @media(max-width:800px){.hero-video{aspect-ratio:16/9}} /* ============ Sonne satt – Aha-Effekt (v1.127.74) ============ Wärmt gezielt Schlüsselstellen, ohne das Layout zu ändern. Greift nur, wenn die Farbwelt „Sonne satt" aktiv ist. */ /* sonne-header-warm: Header passt sich dem warmen Schema an (v1.127.77) */ :root[data-farbwelt="sonne"] header.site{ background:rgba(251,238,217,.92);border-bottom-color:#EBD6AE; } /* Navigationslinks im warmen Ton */ :root[data-farbwelt="sonne"] header.site a{color:#4A2A12} /* Das Petrol wirkt auf Creme ruhiger, wenn die Buttons einen Hauch wärmer sind */ :root[data-farbwelt="sonne"] .btn:not(.ghost){background:#1E8268;border-color:#1E8268} :root[data-farbwelt="sonne"] .btn:not(.ghost):hover{background:#15604C;border-color:#15604C} /* Kopfbereich: warmer Sonnenaufgangs-Verlauf statt flachem Creme */ :root[data-farbwelt="sonne"] .hero{ background:linear-gradient(180deg,#FDF4E1 0%,#FBEED9 55%,#F6E4C4 100%); padding-bottom:clamp(24px,4vw,48px); border-bottom:3px solid #E9622E; } /* Die kleinen Überschriften-Labels in kräftigem Terrakotta */ :root[data-farbwelt="sonne"] .eyebrow{color:#D2551F;font-weight:600} /* Vorzüge-Kacheln: warmer Ton, farbige Oberkante als Akzent */ :root[data-farbwelt="sonne"] .vorzug-karte{ background:#FFF9EE;border-color:#EBD6AE;border-top:4px solid #1B7A63; } :root[data-farbwelt="sonne"] .vorzug-karte:nth-child(2){border-top-color:#E9622E} :root[data-farbwelt="sonne"] .vorzug-karte:nth-child(3){border-top-color:#E0A32B} :root[data-farbwelt="sonne"] .vorzug-karte h3{color:#4A2A12} /* Hauptknopf kräftiger, mit sanftem Terrakotta-Schimmer beim Schweben */ :root[data-farbwelt="sonne"] .btn{box-shadow:0 6px 16px -8px rgba(27,122,99,.5)} :root[data-farbwelt="sonne"] .btn:hover{background:var(--lake-dark)} /* Haus-Karten und Panels bekommen warmen Grund statt reinweiß */ :root[data-farbwelt="sonne"] .card, :root[data-farbwelt="sonne"] .panel{background:#FFF9EE;border-color:#EBD6AE} /* Kontakt-Band unten: warmer Petrol-Verlauf, klar sichtbare Buttons */ :root[data-farbwelt="sonne"] .kontakt-band{ background:linear-gradient(160deg,#1E8268 0%,#176E58 58%,#12563F 100%); } :root[data-farbwelt="sonne"] .kontakt-band h2, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-lead, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-tel, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-neben, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-tel, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-oder, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-tel-nr, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-tel-klein, :root[data-farbwelt="sonne"] .kontakt-band .kontakt-neben a, :root[data-farbwelt="sonne"] .kontakt-band .muted{color:#FFF9EE} /* Hauptbutton im grünen Band: Terrakotta -> hebt sich klar ab (war vorher grün auf grün) */ :root[data-farbwelt="sonne"] .kontakt-band .btn:not(.ghost){ background:#E9622E;color:#fff;border-color:#E9622E;font-weight:600; box-shadow:0 6px 16px -6px rgba(0,0,0,.35); } :root[data-farbwelt="sonne"] .kontakt-band .btn:not(.ghost):hover{background:#D2551F;border-color:#D2551F} /* Ghost-Button im Band: heller Rahmen, füllt sich beim Schweben */ :root[data-farbwelt="sonne"] .kontakt-band .btn.ghost{ border:2px solid #FBEED9;color:#FFF9EE;background:rgba(255,249,238,.06); } :root[data-farbwelt="sonne"] .kontakt-band .btn.ghost:hover{background:rgba(255,249,238,.16)} /* Preis-Abzeichen auf den Hausbildern in warmem Terrakotta */ :root[data-farbwelt="sonne"] .thumb .pill{background:#E9622E;color:#fff;font-weight:600} /* Story-Bilder in Über uns – durchblätterbare Collage (v1.127.76) */ .story-bilder{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0 34px} .story-bild{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:1/1;background:var(--mist)} .story-bild:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto} .story-collage-btn{display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:none} .story-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .story-bild:hover img{transform:scale(1.05)} .prose h2{margin-top:40px;margin-bottom:10px} @media(max-width:700px){.story-bilder{grid-template-columns:repeat(3,1fr);gap:6px} .story-bild:first-child{grid-column:span 2;grid-row:span 2}} /* Erlebnis-Band auf der Startseite (Raster gefixt + Lightbox v1.127.96) */ .erlebnis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:8px} .erlebnis-bild{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:var(--mist)} .erlebnis-bild .gal-btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;border-radius:0;cursor:zoom-in} .erlebnis-bild .gal-btn img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;transition:transform .4s ease} .erlebnis-bild:hover .gal-btn img{transform:scale(1.06)} @media(max-width:900px){.erlebnis-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}} @media(max-width:700px){.erlebnis-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}} @media(max-width:420px){.erlebnis-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}} /* Über-uns: Gastgeber-Bild neben dem Text (v1.127.96) */ .split-hof{align-items:stretch} .hof-portrait{margin:0;border-radius:16px;overflow:hidden;background:var(--mist);min-height:280px} .hof-portrait img{width:100%;height:100%;max-height:420px;object-fit:cover;object-position:center 45%;display:block} @media(max-width:820px){.hof-portrait{min-height:0}.hof-portrait img{max-height:360px}} /* Häufige Fragen im Buchungs-Abschnitt (v1.127.96) */ .faq-block{margin-top:44px;border-top:1px solid var(--line);padding-top:28px} .faq-block > h3{margin:0 0 16px} .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px} @media(max-width:760px){.faq-grid{grid-template-columns:1fr}} /* Ferienhaus-Galerie – durchklickbare Foto-Collage (v1.127.79) */ /* Kompakte Ferienhaus-Galerie: großes Titelbild moderat, kleine Vorschau-Reihe darunter */ .haus-galerie{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0 24px} .haus-gal-btn{margin:0;padding:0;border:0;cursor:pointer;background:var(--mist); border-radius:10px;overflow:hidden;aspect-ratio:1/1;display:block} .haus-gal-btn.gross{grid-column:span 3;grid-row:span 2;aspect-ratio:auto;max-height:300px} .haus-gal-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .haus-gal-btn:hover img{transform:scale(1.05)} @media(max-width:800px){.haus-galerie{grid-template-columns:repeat(4,1fr)} .haus-gal-btn.gross{grid-column:span 4;grid-row:auto;aspect-ratio:16/10;max-height:220px}} /* ============ Vollbild-Hero im Jimdo-Stil (v1.127.81) ============ */ .hero-full{position:relative;width:100%;height:min(66vh,560px);min-height:400px;overflow:hidden; display:flex;align-items:center;justify-content:center} .hero-full-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero-full-overlay{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,rgba(20,10,4,.30) 0%,rgba(20,10,4,.42) 55%,rgba(20,10,4,.58) 100%)} .hero-full-text{text-align:center;color:#fff;max-width:760px;padding:0 24px} .hero-full-text .eyebrow.hell{color:#FBEED9;letter-spacing:.2em;margin-bottom:1em} .hero-full-text h1{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:400;line-height:1.18; letter-spacing:.01em;margin:0 0 .55em;text-shadow:0 2px 24px rgba(0,0,0,.4)} .hero-full-text .lede{color:#F3E9DA;font-size:clamp(1rem,1.35vw,1.12rem);max-width:600px;margin:0 auto 1.6em; text-shadow:0 1px 12px rgba(0,0,0,.35)} .btn-gross{font-size:1.08rem;padding:15px 34px;border-radius:999px} /* Buchungsband direkt unter dem Hero */ .such-band{background:var(--panel);border-bottom:1px solid var(--line);padding:0; box-shadow:0 8px 24px -18px rgba(0,0,0,.3);position:relative;z-index:2} .such-band .search{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none; max-width:1080px;margin:0 auto;padding:18px 24px} :root[data-farbwelt="sonne"] .such-band{background:#FFF9EE;border-bottom-color:#EBD6AE} /* sanftes Hochscrollen zum Buchungsband */ html{scroll-behavior:smooth} @media(max-width:700px){.hero-full{height:min(70vh,520px)}} /* ============ Video-Galerie mit Poster + Play-Button (v1.127.82) ============ */ .video-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:16px 0 8px} .video-karte{margin:0} .video-play{display:block;width:100%;padding:0;border:0;cursor:pointer;position:relative; border-radius:var(--r);overflow:hidden;background:var(--mist);aspect-ratio:16/9;background-size:cover;background-position:center} .video-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .video-play:hover img{transform:scale(1.05)} .video-platzhalter{display:block;width:100%;height:100%;background:linear-gradient(135deg,#2a2a2a,#4a4a4a)} .video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92); box-shadow:0 4px 20px rgba(0,0,0,.35);transition:transform .25s ease,background .25s ease} .video-play-icon::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%); border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #1B7A63} .video-play:hover .video-play-icon{transform:translate(-50%,-50%) scale(1.1);background:#fff} .video-karte figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:10px;font-weight:500} :root[data-farbwelt="sonne"] .video-play-icon::after{border-left-color:#E9622E} /* Video-Overlay (großes Abspielen) */ .video-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center; background:rgba(10,6,2,.92);padding:24px} .video-overlay.auf{display:flex} .video-overlay video{width:min(94vw,1200px);max-height:86vh;border-radius:12px;background:#000; box-shadow:0 20px 80px rgba(0,0,0,.6)} .video-overlay .vo-close{position:absolute;top:20px;right:24px;width:48px;height:48px;border:0;cursor:pointer; border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;line-height:1; transition:background .2s ease} .video-overlay .vo-close:hover{background:rgba(255,255,255,.3)} .video-overlay .vo-titel{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#F3E9DA; font-size:1.05rem;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.6)} /* Blaetter-Pfeile im Video-Overlay (wie in der Bilder-Lightbox) */ .video-overlay .vo-prev,.video-overlay .vo-next{position:absolute;top:50%;transform:translateY(-50%); width:56px;height:56px;border:0;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.18); color:#fff;font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2} .video-overlay .vo-prev{left:20px} .video-overlay .vo-next{right:20px} .video-overlay .vo-prev:hover,.video-overlay .vo-next:hover{background:rgba(255,255,255,.34)} .video-overlay .vo-zaehler{position:absolute;top:26px;left:0;right:0;text-align:center;color:#F3E9DA; font-size:.85rem;letter-spacing:.06em} @media(max-width:700px){ .video-overlay .vo-prev,.video-overlay .vo-next{width:44px;height:44px;font-size:1.5rem} .video-overlay .vo-prev{left:8px}.video-overlay .vo-next{right:8px} } /* Haus-Kopf: Titelbild + Eckdaten nebeneinander (erster Blick, v1.127.85) */ .haus-kopf{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;margin:16px 0 22px} .haus-kopf-bild{margin:0;padding:0;border:0;cursor:pointer;position:relative; border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;max-height:320px;background:var(--mist);display:block} .haus-kopf-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} /* Hochformat-Fotos im Querformat-Rahmen: vollstaendig zeigen statt oben und unten abzuschneiden. Dahinter liegt dasselbe Bild weichgezeichnet als Fuellung. */ .haus-kopf-bild.hochformat img{object-fit:contain;position:relative;z-index:1} .haus-kopf-bild.hochformat::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--fuellbild);background-size:cover;background-position:center; filter:blur(26px) brightness(.72);transform:scale(1.18)} .haus-kopf-bild.hochformat:hover img{transform:none} .haus-kopf-bild:hover img{transform:scale(1.04)} .bild-hinweis{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.62);color:#fff; padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:500} .haus-kopf-info .h-detail{margin:.15em 0 .4em} .haus-kopf-info .facts.big{margin:0 0 18px} .haus-preis-zeile{display:flex;align-items:center;gap:20px;flex-wrap:wrap; padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .haus-preis-zeile .haus-preis{font-family:var(--mono);font-size:1.7rem;display:block;line-height:1.1} .haus-preis-zeile > div span{font-size:.8rem;color:var(--ink-soft)} :root[data-farbwelt="sonne"] .haus-preis{color:#D2551F} @media(max-width:800px){.haus-kopf{grid-template-columns:1fr;gap:18px} .haus-kopf-bild{aspect-ratio:16/10;max-height:260px}} /* nav-cta-fix: 'Verfügbarkeit prüfen' exakt wie 'Freie Häuser anzeigen' (v1.127.85) */ .links a.btn, header .btn{color:#fff !important;font-weight:600;padding:10px 20px} :root[data-farbwelt="sonne"] .links a.btn, :root[data-farbwelt="sonne"] header a.btn{color:#fff !important;background:#1E8268;border-color:#1E8268} :root[data-farbwelt="sonne"] .links a.btn:hover, :root[data-farbwelt="sonne"] header a.btn:hover{background:#15604C;border-color:#15604C;color:#fff !important} /* nicht mehr "small" wirken lassen - gleiche Größe wie Hauptbutton */ .links a.btn.small{font-size:.95rem} /* Tier-Galerie mit Steckbrief-Karten (v1.127.87) */ .tier-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:18px 0 30px} .tier-karte{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1; background:var(--mist);box-shadow:0 2px 12px -6px rgba(0,0,0,.25);max-height:190px} .tier-karte img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .tier-karte:hover img{transform:scale(1.07)} .tier-karte figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 10px; color:#fff;font-weight:600;font-size:.92rem;line-height:1.25;text-align:center; background:linear-gradient(transparent,rgba(0,0,0,.78)); /* Lange Namen brechen sauber um und laufen nie ueber die Kachel hinaus */ overflow-wrap:anywhere;hyphens:auto; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:600px){.tier-karte figcaption{font-size:.84rem;padding:16px 8px 8px}} @media(max-width:600px){.tier-galerie{grid-template-columns:repeat(2,1fr);gap:12px}} /* Video-Play-Buttons auch in normalen Galerien (.gal) sauber darstellen (v1.127.88) */ .gal .gal-item .video-play{aspect-ratio:16/9;width:100%} .gal .gal-item{position:relative} /* Kompakte Vorschau-Zeile auf Hausseite (v1.127.93) */ .haus-vorschau{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 28px} .haus-vorschau-btn{margin:0;padding:0;border:0;cursor:pointer;position:relative; border-radius:10px;overflow:hidden;aspect-ratio:1/1;max-height:150px;background:var(--mist);display:block} .haus-vorschau-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .haus-vorschau-btn:hover img{transform:scale(1.06)} .vorschau-mehr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(20,10,4,.55);color:#fff;font-weight:600;font-size:1rem} @media(max-width:700px){.haus-vorschau{grid-template-columns:repeat(3,1fr)}} /* Interner Merkzettel in der Seitenverwaltung */ .hinweis-recht{border-left:4px solid var(--larch);background:var(--warn-bg)} .hinweis-recht h3{margin-top:0} .pruefliste{margin:12px 0 14px;padding-left:20px} .pruefliste li{margin-bottom:6px} /* Zaehlweise-Auswahl in der Besucheransicht */ .zaehlweise .note{margin-bottom:16px} .zaehlweise select{max-width:520px} /* Hochladezeit in der Medienuebersicht */ .medien-zeit{display:block;font-size:.74rem;color:var(--muted);margin-top:2px;font-family:var(--mono)} /* ---- Kalender blaettern --------------------------------------------------- Warme Leiste in Sand und Terrakotta statt Gruen: Der Kalender ist ohnehin voller gruener und roter Felder — die Steuerung soll sich davon absetzen, nicht mitmischen. */ .cal-blaettern{margin-top:10px} .cal-steuer{display:flex;align-items:center;justify-content:space-between;gap:14px; margin:0 0 14px;padding:9px 12px;border-radius:14px; background:linear-gradient(180deg,#FDF4E4 0%,#F7E9D2 100%); border:1px solid #E8D3AE;box-shadow:0 1px 0 rgba(255,255,255,.7) inset} .cal-zeitraum{font-family:var(--display);font-weight:600;font-size:1.02rem;color:#5A3A1C; text-align:center;flex:1;letter-spacing:.01em} .cal-pfeil{flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; font-size:1.4rem;line-height:1;font-family:var(--display); background:#FFFDF8;color:#C9541F;border:1.5px solid #E3C9A4; box-shadow:0 1px 2px rgba(90,58,28,.10); transition:background .15s,color .15s,border-color .15s,transform .15s} .cal-pfeil:hover:not(:disabled){background:#C9541F;color:#FFF9EE;border-color:#C9541F; transform:scale(1.07)} .cal-pfeil:focus-visible{outline:3px solid #E9A06A;outline-offset:2px} .cal-pfeil:disabled{opacity:.4;cursor:default;color:#B9A48A;border-color:#EADCC4; background:#FBF4E7;box-shadow:none} .cal-month[hidden]{display:none} .cal-hinweis{margin-top:10px} @media(max-width:600px){ .cal-steuer{padding:7px 9px;gap:8px} .cal-pfeil{width:38px;height:38px;font-size:1.25rem} .cal-zeitraum{font-size:.94rem} } /* ---- Schriftmuster (vorübergehend) -------------------------------------- Alle Dateien liegen auf dem eigenen Server — es entsteht kein Aufruf zu Google oder anderen Anbietern. Lizenz: SIL Open Font License. */ @font-face{font-family:'Caveat';src:url('../fonts/Caveat.woff2') format('woff2');font-weight:400 700;font-display:swap} .sm-block{border:1px solid var(--line);border-radius:14px;background:var(--panel); padding:22px 24px;margin:0 0 22px} .sm-block h3{margin:0 0 4px;font-size:1.05rem} .sm-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0 0 16px} .sm-probe{margin:0 0 14px} .sm-probe .sm-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px} .sm-vorzeile{font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:#C9541F} .sm-titel{font-size:2.5rem;line-height:1.12;color:var(--ink)} .sm-name{font-size:1.7rem;color:var(--ink)} .sm-unter{font-size:1.15rem;color:var(--ink)} .sm-fliess{font-size:1.05rem;line-height:1.7;color:var(--ink);max-width:56ch} .f-caveat{font-family:'Caveat',cursive} /* ---- Handschrift Caveat ---------------------------------------------------- Caveat ist eine fliessende Handschrift mit duennen Strichen und kleiner Mittellaenge. Sie braucht deshalb mehr Strichstaerke (600–700) und mehr Groesse als eine gewoehnliche Schrift, sonst wirkt sie zart und verliert gegenueber dem Fliesstext. Geschaltet ueber die Einstellung schrift_hand (1 = an). Bewusst ausgenommen bleiben Fliesstext, Preise, Kalender, Formularfelder und Tabellen — dort entscheidet Lesbarkeit ueber Buchungen. */ :root[data-handschrift="an"]{ --display:"Caveat","Bricolage Grotesque","Segoe UI",system-ui,sans-serif; } :root[data-handschrift="an"] h1, :root[data-handschrift="an"] h2, :root[data-handschrift="an"] h3, :root[data-handschrift="an"] h4{font-weight:700;letter-spacing:.005em} :root[data-handschrift="an"] h1{font-size:clamp(2.7rem,5.2vw,4.1rem);line-height:1.06} :root[data-handschrift="an"] h2{font-size:clamp(2.2rem,3.8vw,3.1rem);line-height:1.12} :root[data-handschrift="an"] h3{font-size:clamp(1.55rem,2.2vw,1.9rem);line-height:1.2} :root[data-handschrift="an"] .soon-text h3{font-size:1.6rem;line-height:1.15} :root[data-handschrift="an"] h4{font-size:1.36rem;line-height:1.26} :root[data-handschrift="an"] .hero h1{font-size:clamp(2.7rem,5.6vw,4.2rem)} /* Vorzeilen: Caveat vertraegt keine Versalien mit weiter Sperrung */ :root[data-handschrift="an"] .eyebrow{font-family:"Caveat",cursive;font-weight:700; font-size:1.32rem;letter-spacing:0;text-transform:none;opacity:1} /* Menue, Marke, Fusszeile */ /* Menue bewusst in der ruhigen Schrift. Ein Menue wird nicht gelesen, sondern ueberflogen — dafuer braucht es klare, voneinander abgesetzte Woerter. Eine verbundene Handschrift verhindert genau das: Die Punkte fliessen ineinander. Dieselbe Grenze gilt fuer Preise, Kalender und Formularfelder, deshalb wirkt es nicht willkuerlich. */ :root[data-handschrift="an"] .links a{font-family:var(--body);font-weight:500; font-size:.97rem;letter-spacing:.01em;line-height:1.2;display:inline-flex; align-items:center} :root[data-handschrift="an"] .links{align-items:center;gap:22px} :root[data-handschrift="an"] .links .nav-konto{font-family:var(--body);font-weight:500;font-size:.97rem} :root[data-handschrift="an"] .links .btn{font-family:var(--body);font-weight:600;font-size:.95rem; letter-spacing:.01em} /* Klickbarkeit sichtbar machen und die aktuelle Seite hervorheben */ :root[data-handschrift="an"] .links a:not(.btn){position:relative;padding-bottom:2px} :root[data-handschrift="an"] .links a:not(.btn)::after{content:"";position:absolute; left:0;right:0;bottom:-2px;height:2px;background:#C9541F;border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .18s ease} :root[data-handschrift="an"] .links a:not(.btn):hover::after, :root[data-handschrift="an"] .links a:not(.btn):focus-visible::after, :root[data-handschrift="an"] .links a:not(.btn)[aria-current]::after{transform:scaleX(1)} /* Der Betriebsname links bleibt in der Handschrift — dort traegt sie */ :root[data-handschrift="an"] .brand{font-family:"Caveat",cursive;font-weight:700;font-size:1.66rem;line-height:1.2} :root[data-handschrift="an"] footer.site h4{font-family:"Caveat",cursive;font-weight:700; font-size:1.42rem;letter-spacing:0;text-transform:none} :root[data-handschrift="an"] footer.site a{font-family:"Caveat",cursive;font-weight:600;font-size:1.22rem} /* Schaltflaechen und Bildunterschriften */ :root[data-handschrift="an"] .btn{font-family:"Caveat",cursive;font-weight:700; font-size:1.3rem;letter-spacing:.005em} :root[data-handschrift="an"] figcaption, :root[data-handschrift="an"] .lightbox .lb-cap{font-family:"Caveat",cursive;font-weight:600; font-size:1.28rem} :root[data-handschrift="an"] .tier-karte figcaption{font-size:1.2rem;line-height:1.25} :root[data-handschrift="an"] .slot span{font-family:"Caveat",cursive;font-weight:600;font-size:1.24rem} /* Fliesstext ebenfalls in der Handschrift — sonst wirkt die Seite halbherzig. Caveat braucht dafuer deutlich mehr Groesse und Zeilenabstand als eine gewoehnliche Schrift, sonst ermuedet das Lesen. */ :root[data-handschrift="an"] body{font-family:"Caveat",cursive;font-size:1.32rem;line-height:1.62} :root[data-handschrift="an"] p, :root[data-handschrift="an"] li, :root[data-handschrift="an"] .muted, :root[data-handschrift="an"] figcaption{font-family:"Caveat",cursive} :root[data-handschrift="an"] .prose p, :root[data-handschrift="an"] .lead-max{font-size:1.34rem;line-height:1.68} :root[data-handschrift="an"] .small, :root[data-handschrift="an"] .hint, :root[data-handschrift="an"] .help{font-size:1.2rem;line-height:1.6} /* Nebentexte duerfen in einer Handschrift nicht zusaetzlich blass sein — klein und hell zusammen macht sie unlesbar. */ :root[data-handschrift="an"] .muted{color:#5C3E24;font-size:1.24rem;line-height:1.62} /* Der dunkle Fussbereich braucht auch bei eingeschalteter Handschrift einen hellen gedaempften Ton. Die Regel darueber ist spezifischer als "footer.site .muted" und hat den Fuss sonst wieder braun eingefaerbt. */ :root[data-handschrift="an"] footer.site .muted{color:#9FB2BA} :root[data-handschrift="an"] .karte p, :root[data-handschrift="an"] .panel p, :root[data-handschrift="an"] .vorzug p{font-size:1.26rem;line-height:1.6;color:#4A2A12} /* Feldbeschriftungen im Buchungskasten deutlich lesbar */ :root[data-handschrift="an"] label, :root[data-handschrift="an"] .field label, :root[data-handschrift="an"] legend{font-family:"Caveat",cursive;font-weight:600; font-size:1.24rem;color:#4A2A12} /* Vorzeile klar kleiner als die Ueberschrift darunter */ :root[data-handschrift="an"] .eyebrow{font-size:1.5rem;font-weight:700;opacity:1} /* Zahlen, Formulare und Kalender bleiben in der ruhigen Schrift */ :root[data-handschrift="an"] .rp-platz, :root[data-handschrift="an"] .rp-titel, :root[data-handschrift="an"] .rp-hinweis, :root[data-handschrift="an"] .schnellwahl .btn, :root[data-handschrift="an"] .row-actions .btn.small{font-family:"Caveat",cursive; font-weight:600;font-size:1.2rem} :root[data-handschrift="an"] .rp-titel{font-size:1.34rem;font-weight:700} /* „Wie lange?" war die kleinste Schrift der ganzen Seite */ /* Schnellauswahl unter dem Suchfeld: „Wie lange?" war die kleinste Schrift der ganzen Seite und kaum zu entziffern. */ :root[data-handschrift="an"] .rp-quick-label{font-family:"Caveat",cursive;font-weight:700; font-size:1.26rem;color:#5C3E24;opacity:1;letter-spacing:0} :root[data-handschrift="an"] .rp-quick-hinweis{font-family:"Caveat",cursive;font-size:1.1rem} :root[data-handschrift="an"] .chip{font-family:"Caveat",cursive;font-weight:600;font-size:1.16rem} /* Datumsfeld: die Beschriftung im Feld war deutlich kleiner als alles daneben */ :root[data-handschrift="an"] .rp-text{font-family:"Caveat",cursive;font-weight:700;font-size:1.5rem; line-height:1.25} :root[data-handschrift="an"] .rp-platz .rp-text small, :root[data-handschrift="an"] .rp-text span{font-weight:600;font-size:1.16rem} /* Auswahlfelder der Suche gehoeren zur Handschrift — sie enthalten nur kurze Angaben wie „2 Personen". Die Eingabefelder der Buchung (Name, Anschrift) bleiben in der ruhigen Schrift. */ :root[data-handschrift="an"] .search select, :root[data-handschrift="an"] .such-band select, :root[data-handschrift="an"] .buchbox select{font-family:"Caveat",cursive;font-weight:600; font-size:1.34rem} :root[data-handschrift="an"] input, :root[data-handschrift="an"] select, :root[data-handschrift="an"] textarea, :root[data-handschrift="an"] table, :root[data-handschrift="an"] .cal, :root[data-handschrift="an"] .price, :root[data-handschrift="an"] .haus-preis, :root[data-handschrift="an"] .lb-zaehler, :root[data-handschrift="an"] .medien-zeit, :root[data-handschrift="an"] .admin-body, :root[data-handschrift="an"] .admin-body p, :root[data-handschrift="an"] .slot b, :root[data-handschrift="an"] .eyebrow.mono, :root[data-handschrift="an"] code, :root[data-handschrift="an"] .medien-datei{font-family:var(--body)} /* Rechtstexte in der ruhigen Schrift — dort muss jedes Wort eindeutig lesbar sein */ :root[data-handschrift="an"] body.seite-recht p, :root[data-handschrift="an"] body.seite-recht li{font-family:var(--body);font-size:1rem;line-height:1.7} /* ---- Kopfbereich: Platz fuer das Menue ------------------------------------- Marke und Menue brauchten zusammen 1204 px, der Inhaltsbereich ist aber auf 1140 px begrenzt — deshalb brach die Zeile um. Der Kopfbereich darf jetzt breiter laufen als der uebrige Inhalt; das ist bei Navigationsleisten ueblich und faellt nicht auf, weil dort nur eine Zeile steht. */ header.site .wrap{max-width:1340px} .nav .links{gap:15px} :root[data-handschrift="an"] .links{gap:15px} :root[data-handschrift="an"] .links a{font-size:.94rem} :root[data-handschrift="an"] .links .nav-konto{font-size:.94rem} :root[data-handschrift="an"] .links .btn{font-size:.92rem;padding:9px 16px} /* Menue deutlicher als Menue erkennbar: gleichmaessige Abstaende, klare Trennung zum Betriebsnamen, aktive Seite dauerhaft unterstrichen. */ header.site .brand{padding-right:26px;margin-right:8px;border-right:1px solid var(--line)} /* Bei knappem Platz frueher auf das Klappmenue wechseln, statt umzubrechen */ @media(max-width:1279px){ .nav .links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--panel); flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px; border-bottom:1px solid var(--line);box-shadow:var(--shadow)} .nav .links.open{display:flex} .nav .links a{padding:12px 0;border-bottom:1px solid var(--line)} .nav .links .btn{margin-top:14px;justify-content:center;border-bottom:none;color:#fff} .burger{display:flex} header.site .brand{border-right:none;padding-right:0;margin-right:0} :root[data-handschrift="an"] .links a, :root[data-handschrift="an"] .links .nav-konto{font-size:1rem} } /* ---- Aktive Seite im Menue ------------------------------------------------- Nur der Unterstrich, kein zusaetzlicher Punkt: Beides zusammen sagt dasselbe zweimal. Die aktuelle Seite traegt den Strich dauerhaft, beim Ueberfahren erscheint er kurz — der Unterschied liegt in der Schriftstaerke. */ .nav .links a[aria-current="page"]{color:var(--ink);font-weight:600} /* ---- Datumsfeld deutlicher -------------------------------------------------- „Anreise – Abreise" und „Zeitraum waehlen" standen in einem hellen Ton auf hellem Grund und waren kaum zu erkennen. */ :root[data-handschrift="an"] .rp-text b{color:#4A2A12;font-weight:700;font-size:1.5rem} :root[data-handschrift="an"] .rp-text em{color:#6B4A28;font-size:1.16rem;font-weight:600} :root[data-handschrift="an"] .rp-text.rp-leer b{color:#5C3E24;font-weight:700} :root[data-handschrift="an"] .rp-icon{color:#1E8268} /* ---- Buchungsweg: Ueberschriften und Beschriftungen in der Handschrift ------ Frueher lag hier eine Notbremse, die den gesamten Buchungsweg auf die ruhige Schrift stellte — samt Ueberschriften. Der Weg sah dadurch aus wie aus einem anderen Haus. Ausloeser war ein Rasterfehler, keine Schriftfrage: In einer Zweispalten-Zeile standen vier Felder, was implizite Spalten erzeugte und die Beschriftungen ineinanderschob. Das Raster ist jetzt in Ordnung, also gilt wieder die einfache Regel — Ueberschriften und Beschriftungen tragen die Handschrift, nuechtern bleibt nur, was in den engen Feldreihen selbst steht: Eingabefelder, Auswahllisten und die Zahlenspalte der Zusammenfassung. */ :root[data-handschrift="an"] .wizard-grid input, :root[data-handschrift="an"] .wizard-grid select, :root[data-handschrift="an"] .wizard-grid textarea, :root[data-handschrift="an"] .wizard-grid .summary, :root[data-handschrift="an"] .bookform input, :root[data-handschrift="an"] .bookform select, :root[data-handschrift="an"] .bookform textarea{font-family:var(--body)} :root[data-handschrift="an"] .wizard-grid input, :root[data-handschrift="an"] .wizard-grid select, :root[data-handschrift="an"] .wizard-grid textarea, :root[data-handschrift="an"] .bookform input, :root[data-handschrift="an"] .bookform select, :root[data-handschrift="an"] .bookform textarea{font-size:1rem} :root[data-handschrift="an"] .summary{font-size:.92rem} /* Ueberschriften etwas unter dem Seitenmass — im Kasten waere das volle Mass zu gross */ :root[data-handschrift="an"] .wizard-grid h1{font-size:clamp(2rem,3.4vw,2.6rem)} :root[data-handschrift="an"] .wizard-grid h2{font-size:1.8rem} :root[data-handschrift="an"] .wizard-grid h3{font-size:1.5rem} /* Feldbeschriftungen: die 0,78 rem der Feldreihe sind fuer Caveat zu klein. Feste Zeilenhoehe, damit nichts in die Zeile darunter laeuft. */ :root[data-handschrift="an"] .wizard-grid label, :root[data-handschrift="an"] .wizard-grid .form-zeile .field > label, :root[data-handschrift="an"] .bookform .form-zeile .field > label{font-family:"Caveat",cursive; font-weight:600;font-size:1.2rem;line-height:1.25;color:#4A2A12} :root[data-handschrift="an"] .wizard-grid p, :root[data-handschrift="an"] .wizard-grid li, :root[data-handschrift="an"] .wizard-grid .muted{font-size:1.18rem;line-height:1.5} :root[data-handschrift="an"] .wizard-grid .small, :root[data-handschrift="an"] .wizard-grid .hint, :root[data-handschrift="an"] .wizard-grid .help, :root[data-handschrift="an"] .wizard-grid .form-zeile .field > .help, :root[data-handschrift="an"] .bookform .form-zeile .field > .help{font-size:1.08rem;line-height:1.4} /* Auswahlkarten fuer Zahlung und Reisezweck: Caveat braucht mehr Groesse */ :root[data-handschrift="an"] .zahlkarte b, :root[data-handschrift="an"] .zweck-karte b{font-size:1.28rem} :root[data-handschrift="an"] .zahlkarte em, :root[data-handschrift="an"] .zweck-karte em, :root[data-handschrift="an"] .wizard-grid .check{font-size:1.1rem;line-height:1.45} :root[data-handschrift="an"] .wizard-grid .check span em{font-size:1.04rem} /* Schrittleiste: stand bisher als Systemschrift in 0,8 rem da — eine dritte Schriftvariante neben Handschrift und Formular. Die Ziffern bleiben in der Zifferschrift, weil sie mittig in einem Kreis sitzen. */ :root[data-handschrift="an"] .wizard-steps li{font-family:"Caveat",cursive;font-size:1.16rem; line-height:1.25;color:#5C3E24} :root[data-handschrift="an"] .wizard-steps .txt{font-family:"Caveat",cursive} :root[data-handschrift="an"] .wizard-steps .nr{font-family:var(--mono);font-size:.85rem} @media(max-width:520px){ :root[data-handschrift="an"] .wizard-steps li{font-size:1.02rem} } /* ---- Kontaktseite: Beschriftungen lesbar ---------------------------------- Telefon, E-Mail und Adresse standen als kleine fette Zeilen ueber den Angaben und gingen in der Handschrift unter. */ :root[data-handschrift="an"] .kontakt-block p b, :root[data-handschrift="an"] .kontakt-spalte p b{font-size:1.16rem;font-weight:700; color:#5C3E24;display:inline-block;margin-bottom:2px} :root[data-handschrift="an"] .kontakt-block p, :root[data-handschrift="an"] .kontakt-spalte p{font-size:1.24rem;line-height:1.55} /* Videowerkzeug: Einrichtungsprotokoll */ .mw-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .mw-block h4{margin:0 0 6px} .mw-log{margin-top:12px;padding:12px;background:#0F1A20;color:#CFE3EA;border-radius:10px; font-family:var(--mono);font-size:.8rem;line-height:1.5;white-space:pre-wrap;overflow-x:auto} /* Video-Eingang */ .ve-upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0} .ve-fortschritt{margin-top:14px} .ve-zeile{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;margin-bottom:6px} .ve-balken{height:8px;background:var(--line);border-radius:99px;overflow:hidden} .ve-balken>div{height:100%;width:0;background:var(--lake);transition:width .2s} .ve-protokoll{list-style:none;margin:12px 0 0;padding:0;font-size:.88rem;max-height:240px;overflow-y:auto} .ve-protokoll li{padding:3px 0;border-bottom:1px solid var(--line)} .ve-protokoll li.good{color:#1B7A63} .ve-protokoll li.bad{color:#C9541F} .ve-mini{width:76px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line); display:block;margin-bottom:5px} .ve-tab td{vertical-align:top} .ve-log{white-space:pre-wrap;font-family:var(--mono);font-size:.78rem;background:#0F1A20;color:#CFE3EA; padding:10px;border-radius:8px;margin-top:6px;max-height:220px;overflow:auto} /* Tier-Videos auf der Startseite */ .tier-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px} .tier-video{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line); background:#000;aspect-ratio:16/10} .tier-video video{width:100%;height:100%;object-fit:cover;display:block} .tier-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff; font-size:.95rem;background:linear-gradient(transparent,rgba(0,0,0,.62))} .tier-video-start{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center} .tier-video-pfeil{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.88); display:block;position:relative;transition:transform .15s} .tier-video-pfeil::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%); border-left:17px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent} .tier-video-start:hover .tier-video-pfeil{transform:scale(1.08)} .tier-video.laeuft .tier-video-pfeil{opacity:0} @media(max-width:700px){.tier-videos{grid-template-columns:1fr 1fr;gap:10px} .tier-video figcaption{font-size:.82rem;padding:20px 8px 8px}} /* Bildvorschau im Hausformular */ .bild-vorschau{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:12px; background:var(--panel)} .bild-quelltext{margin-bottom:8px} .bild-quelltext>summary{cursor:pointer;font-size:.82rem;color:var(--ink-soft);padding:4px 0; list-style:none;user-select:none} .bild-quelltext>summary::before{content:"▸ ";display:inline-block;transition:transform .15s} .bild-quelltext[open]>summary::before{content:"▾ "} .bild-quelltext>summary::-webkit-details-marker{display:none} .bild-vorschau-kopf{margin:0 0 10px;font-size:.88rem;color:var(--ink-soft)} .bild-vorschau-fuss{margin-top:10px} .bild-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px} .bild-kachel{position:relative;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden; background:var(--panel)} .bild-kachel.ist-titel{border-color:var(--lake);box-shadow:0 0 0 2px rgba(30,130,104,.18)} .bild-kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#E9EEF0} .bild-kachel.fehlt img{opacity:.25} .bild-kachel.fehlt::after{content:"Datei fehlt";position:absolute;top:38%;left:0;right:0;text-align:center; font-size:.8rem;color:#C9541F} .bild-kachel figcaption{font-size:.68rem;padding:5px 6px;color:var(--ink-soft);word-break:break-all; line-height:1.35} .bild-marke{position:absolute;top:6px;left:6px;background:var(--lake);color:#fff;font-size:.66rem; padding:2px 7px;border-radius:99px} .bild-werkzeuge{position:absolute;top:6px;right:6px;display:flex;gap:4px} .bild-knopf{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.94);cursor:pointer;font-size:1rem;line-height:1;padding:0; display:flex;align-items:center;justify-content:center;color:var(--ink)} .bild-knopf:hover{background:#fff} .bild-weg{color:#C9541F;font-size:1.15rem} .bild-weg:hover{background:#C9541F;color:#fff;border-color:#C9541F} /* Galerie: portionsweise anzeigen */ .gal-item.gal-verborgen{display:none} .gal-mehr-band{display:flex;justify-content:center;margin-top:22px} .gal-mehr{min-width:230px} .gal-rest{opacity:.7} /* Doppelte Bilder in der Verwaltung */ .doppelte-block{margin-top:18px} .doppel-gruppe{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:14px; background:var(--panel)} .doppel-kopf{font-size:.86rem;color:var(--ink-soft);margin-bottom:10px} .doppel-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px} .doppel-kachel{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden; display:flex;flex-direction:column;background:#fff} .doppel-kachel.behalten{border-color:var(--lake);box-shadow:0 0 0 2px rgba(30,130,104,.16)} .doppel-kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#E9EEF0} .doppel-kachel figcaption{padding:8px 9px;font-size:.78rem;line-height:1.4;display:flex; flex-direction:column;gap:2px} .doppel-kachel code{font-size:.68rem;word-break:break-all;color:var(--ink-soft)} .doppel-marke{align-self:flex-start;background:var(--lake);color:#fff;font-size:.66rem; padding:2px 7px;border-radius:99px} .doppel-werkzeuge{display:flex;gap:6px;padding:0 9px 9px;margin-top:auto;flex-wrap:wrap} /* Videos beschriften */ .vb-liste{display:flex;flex-direction:column;gap:16px} .vb-zeile{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:14px;border:1px solid var(--line); border-radius:12px;background:var(--panel)} .vb-video video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;background:#000;display:block} .vb-datei{display:block;margin-top:6px;font-size:.68rem;color:var(--ink-soft);word-break:break-all} .vb-felder{display:flex;flex-direction:column;gap:6px} .vb-label{font-size:.8rem;color:var(--ink-soft)} .vb-felder input[type=text]{width:100%} .vb-tags{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 8px} .vb-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line); border-radius:99px;cursor:pointer;font-size:.85rem;background:#fff;user-select:none} .vb-tag input{margin:0} .vb-tag:has(input:checked){background:var(--lake);color:#fff;border-color:var(--lake)} .vb-fuss{position:sticky;bottom:0;padding:14px 0 4px;background:linear-gradient(transparent,var(--panel) 40%); margin-top:18px} @media(max-width:760px){.vb-zeile{grid-template-columns:1fr}} /* Galerie: Mehrfachauswahl und Sammelaktionen */ .massen-leiste{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:11px 14px;margin-bottom:14px;background:var(--ink);color:#fff;border-radius:12px; box-shadow:0 8px 24px -12px rgba(0,0,0,.5)} .massen-zahl{font-size:.9rem} .massen-zahl b{font-size:1.05rem} .massen-trenner{flex:1 1 auto} .massen-leiste .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent} .massen-leiste .btn.ghost:hover{background:rgba(255,255,255,.14)} .massen-wahl,.massen-wert,.massen-haus{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3); background:#fff;color:var(--ink);font-size:.88rem;max-width:200px} .media-wahl{position:absolute;top:8px;left:8px;z-index:3;background:rgba(255,255,255,.94); border-radius:7px;padding:5px;line-height:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)} .media-wahl input{width:17px;height:17px;margin:0;cursor:pointer} .media-card.ist-gewaehlt{outline:3px solid var(--lake);outline-offset:-1px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Doppelte: immer paarweise nebeneinander vergleichen */ .doppel-reihe{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:900px} .doppel-kachel img{aspect-ratio:3/2} /* Medien beschriften: Filterleiste */ .bs-filter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 18px} .bs-gruppe{display:inline-flex;gap:6px} .bs-zahl{margin-left:auto;font-size:.88rem;color:var(--ink-soft)} .vb-video img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;display:block; background:#E9EEF0} .vb-video a{display:block} .vb-blaettern{display:inline-flex;align-items:center;gap:10px;margin-left:14px}