/*
CSS definitions for sagi, in addition to base-layout.css
created 2022 by daniel.ammann@n3xt.ch
source_date = "2025-04-07T11:11:51.000Z"
file_version = 1181;
*/
/* ========== Fonts ============= */
/* https://hanken.co/collections/free/products/hk-grotesk */
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Thin.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-ExtraLight.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Light.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Regular.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Medium.woff') format('woff');
font-weight: 550;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('/assets/fonts/HKGrotesk/HKGrotesk-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
/* END Fonts section
*/
/* ========== Colors & Typo ========== */
:root {
--background-color: white; /* sawblade lightgrey #d1d1d1 */
--font-color: #0d0d19; /* sawblade darkgrey */
--font-color-data-table: #000000;
--label-color: #877c7270;
--font-size: 0.75rem;
--accent-color: #deaf79; /* plank light */
--accent-color-t3: #deaf798c; /* plank light */
--accent-color-o3: #edd3b7; /* plank light */
--selection-color: #deaf7990;
--tablerow-hover-color: #deaf7930;
/* --state-border: #FFFFFF55; */
--state-border: #0000000a;
--yellow-01: #fefee1;
--yellow-02: #f9f9ae;
--yellow-03: #f3f388;
--yellow-05: #e3e340;
--yellow-07: #b6b616;
--yellow-08: #8f8f09;
--yellow-09: #ffff3f;
--green-02: #53df83; /* #65e691; /* #67ef96; */
--green-03: #5bca81;
--green-05: #3ca460;
--green-06: #34844f;
--green-07: #2c6a41;
--blue-02: #539ae6;
--blue-05: #3f90e7; /* #2a7dd6; */
--blue-06: #276fbb;
--blue-07: #0e4988;
--violet-02: #bc90f5;
--violet-03: #9f61f0;
--violet-05: #7f3fd2;
--violet-06: #6d32ba;
--violet-07: #621dbc;
--red-03: #e6537e;
--red-05: #d22d5d;
--red-07: #8a1e3d;
--font-family: "HKGrotesk",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* doron brayer @https://github.com/necolas/normalize.css/issues/665#issue-218860829*/
--icon-menu:url("data:image/svg+xml;utf8,");
/*--column-padding: -22%;*/
/*--column-padding-inner-factor: 1.5;*/
/* single sawteeth --img-sawteeth: url("data:image/svg+xml;utf8,"); */
--img-sawteeth: url("data:image/svg+xml;utf8,");
--icon-menu:url("data:image/svg+xml;utf8,");
--icon-disabled-visible:url("data:image/svg+xml;utf8,");
--icon-filter-accent:url("data:image/svg+xml;utf8,");
--icon-filter-remove:url("data:image/svg+xml;utf8,"); /* Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools */
--icon-filter-reset:url("data:image/svg+xml;utf8,"); /* Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools */
--icon-ticket: url("data:image/svg+xml;utf8,");
--icon-search: url("data:image/svg+xml;utf8,");
--icon-chat-bubble: url("data:image/svg+xml;utf8,");
--icon-chat-bubble-outline: url("data:image/svg+xml;utf8,");
--icon-sticky-note: url("data:image/svg+xml;utf8,");
--icon-first-page: url("data:image/svg+xml;utf8,");
--icon-autorenew: url("data:image/svg+xml;utf8,");
--icon-refresh: url("data:image/svg+xml;utf8,");
--icon-playlist-add: url("data:image/svg+xml;utf8,");
--icon-playlist-remove: url("data:image/svg+xml;utf8,");
--icon-person-add: url("data:image/svg+xml;utf8,");
--icon-qr-code: url("data:image/svg+xml;utf8,");
--icon-qr-code-add: url("data:image/svg+xml;utf8,");
--icon-send: url("data:image/svg+xml;utf8,");
--icon-star: url("data:image/svg+xml;utf8,");
--icon-star-filled: url("data:image/svg+xml;utf8,");
--icon-label: url("data:image/svg+xml;utf8,");
--font-color-not-edited: #ca9affc2; /* greenish #4dacbfa8; /*#6fe7ff70;*/ /*violet: #ca9affc2;*/
--editor-tablerow-hover-color: #7800b440;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #0d0d19; /* darkgrey sawblade */
--font-color: white;
--font-color-data-table: #d8d6d6;
--label-color: #877c72;
--accent-color: #88653d /* plank dark */;
--accent-color-t3: #deaf7955;
--accent-color-o3: #52433a; /* plank light */
--tablerow-hover-color: #deaf7930;
/* --state-border: #00000022; */
--state-border: #FFFFFF16;
--img-sawteeth:url("data:image/svg+xml;utf8,");
--icon-menu:url("data:image/svg+xml;utf8,");
--icon-disabled-visible:url("data:image/svg+xml;utf8,");
--icon-filter-accent:url("data:image/svg+xml;utf8,");
--icon-filter-remove:url("data:image/svg+xml;utf8,"); /* Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools */
--icon-filter-reset:url("data:image/svg+xml;utf8,"); /* Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools */
--icon-ticket: url("data:image/svg+xml;utf8,");
--icon-search: url("data:image/svg+xml;utf8,");
--icon-chat-bubble: url("data:image/svg+xml;utf8,");
--icon-chat-bubble-outline: url("data:image/svg+xml;utf8,");
--icon-sticky-note: url("data:image/svg+xml;utf8,");
--icon-first-page: url("data:image/svg+xml;utf8,");
--icon-autorenew: url("data:image/svg+xml;utf8,");
--icon-refresh: url("data:image/svg+xml;utf8,");
--icon-playlist-add: url("data:image/svg+xml;utf8,");
--icon-playlist-remove: url("data:image/svg+xml;utf8,");
--icon-person-add: url("data:image/svg+xml;utf8,");
--icon-qr-code: url("data:image/svg+xml;utf8,");
--icon-qr-code-add: url("data:image/svg+xml;utf8,");
--icon-send: url("data:image/svg+xml;utf8,");
--icon-star: url("data:image/svg+xml;utf8,");
--icon-star-filled: url("data:image/svg+xml;utf8,");
--icon-label: url("data:image/svg+xml;utf8,");
}
}
/* ========== Animations ========== */
@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to { -webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform:rotate(0deg);}
to { -moz-transform:rotate(360deg);}
}
/* ========== Main definitions ========== */
body {
padding: 0;
font-family: var(--font-family, sans-serif);
color: var(--font-color);
background-color: var(--background-color);
}
body:not(.ready):not(.no-js) #content {
filter: brightness(0);
transition: filter .3s;
}
body:not(.ready):not(.no-js) nav {
filter: brightness(1);
transition: filter 0s;
}
table {
font-weight: var(--font-weight);
line-height: var(--line-height);
}
.plank {
/*contains :before and :after with the fixed plank image on the left and right*/
display: block;
position: fixed;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
}
.plank:before,
.plank:after {
content: "\200b";
display: block;
position: fixed;
height: 100%;
width: 95%;
background-image: url("/assets/img/buechner-sehr-hell.jpg"), url("/assets/img/buechner-sehr-hell-blur2.jpg"), url("../img/buechner-sehr-hell.jpg") ;
background-repeat-x: no-repeat;
background-position: left;
}
.plank:after {
right: -10%;
background-position: right;
width: 60%;
visibility: hidden;
}
article.content,
article.booking {
/* contains the main content of the page, which is centered and has the sawteeth ornament on the right */
position: absolute; /* Safari on iPhone adds -8px margin-right for relative positioned nodes */
z-index: 1;
top: 0;
width: 92%;
width: calc(100vw - 1em); /* 2024-01-20 */
min-height: 100vh;
margin: 0% 5%;
margin-left: 0%;
padding: 0.4em 1em 2em 3em;
padding: 0.4em 1em 2em 3em; /* 2024-01-20 */
/*background-color: var(--background-color);*/
}
article.content:before {
/* solid background to cover eventual gaps between background images in Safari */
--sawblade-width: calc( 1008 / 1024 ); /* in SVG, the sawteeth background width is 1024, the teeth go back to 1008 */
content: "\200b";
display: block;
position: absolute;
top: -25%;
z-index: -1;
width: calc(99.8% * var(--sawblade-width));
min-height: 125%;
margin-left: -3em;
background-color: var(--background-color);
}
article.content:after {
/* background repeated images for sawteeth */
content: "\200b";
position: absolute;
top: 0;
right: 0;
z-index: -1;
min-height: calc(100% + 0.5em);
width: 99.9%;
width: 100%;
margin: -0.5em -1.1em 0 -22%;
background-image: var(--img-sawteeth);
background-repeat-x: no-repeat;
background-position: 100.1%;
background-size: 100%;
/* remedy the small rounding error on the right edge */
transform: scale(1.000); /* 1.003 leaves a thin black line on chrome xl screen 100% */
transform-origin: left;
}
article header {
position: absolute;
z-index: 9;
height: 2em;
width: 90%;
padding: 0.4em 0.5em 2em 2em;
}
article footer {
}
#content h1#top.server-offline:before {
content: "cloud";
color: transparent;
float: right;
width: 2rem;
height: 2rem;
background-image: var(--icon-cloud-slash-fill);
backhround-repeat: no-repeat;
background-size: 100%;
}
div.info {
background-color: #040408; /* var(--background-color); is too blueish */
color: var(--font-color); /* var(--font-color); doesn't work on dark background 2024-06-28 */
font-size: 1.1em;
font-weight: 400;
margin: 1em 0em;
padding: 0.5em 1em 1em 2em;
box-shadow: 5px 5px 35px 25px var(--model-shadow);
}
@media (prefers-color-scheme: light) {
/* DEBUG 2025-04-07: black background didn't work and wasn't suitable in .continue-edit.modal */
div.info {
background-color: white;
}
.modal .info a.btn.btn-default,
.modal .info a.btn.btn-default,
.modal .info button.btn-default,
.modal .info .cookie-banner > p > a.btn:first-child {
color: var(--font-color);
background-color: var(--accent-color);
border-color: var(--accent-color);
}
}
div.info p + p {
/* margin-top: 0;*/
}
div.info a.btn:hover {
border-color: #caa16e00;
background-color: var(--selection-color);
color: var(--font-color);
}
div.info a.btn:hover:after {
display: none;
}
article.booking {
pointer-events: none;
}
article.booking:not(.show) > * {
display: none;
pointer-events: auto;
}
article.booking.show {
position: fixed;
z-index: 100;
display: block;
height: 100%;
width: 96%;
overflow-y: scroll;
background-color: var(--background-color);
pointer-events: auto;
}
article.booking #booking_details {
display: none;
}
article.booking.show.details form {
display: none;
}
article.booking.show.details #booking_details {
display: block;
}
article.booking.show.details #booking_details .modal .info {
top: 2%;
transform: translate(-50%,0);
width: 86%;
background-color: transparent;
box-shadow: none;
}
#booking_details .modal {
/* background-color: transparent;*/
box-shadow: none;
}
#booking_details .modal .close {
position: fixed;
display: block;
color: transparent;
top: -2%;
right: -7%;
width: 2.5em;
height: 2.5em;
background-color: transparent;
border-radius: 2em;
background-image: var(--icon-cancel-white);
background-repeat: no-repeat;
background-size: 2em;
background-position: 0.25em 0.25em;
}
#booking_details .modal .close:hover {
border-collapse: collapse;
background-color: black;
border: 2px solid white;
background-image: var(--icon-cancel-round);
background-size: 3.2em;
background-position: -0.4em -0.4em;
}
#booking_details .modal .minimizer {
position: absolute;
z-index: -1;
color: transparent;
background-color: white;
width: 100%;
height: 100%;
margin-top: -1em;
margin-left: -2em;
display: block;
/* transition: background-color 0.5s ease-out; */
/* background-color: transparent; */
}
#booking_details .message.show p:last-of-type {
padding-bottom: 2em;
border-bottom: 1px solid var(--font-color);
margin-bottom: 1em;
}
#booking_details h3 {
margin-top: -0.5em;
margin-bottom: 1em;
color: var(--font-color);
}
#booking_details .meta > span {
display: block;
}
.state-62,
.state-63,
.state-83 { color: white; }
.state-46,
.state-57,
.state-64 { color: var(--font-color); }
.state-84,
.state-86 { color: white; }
.state-58,
.state-59 { color: var(--font-color); }
.state-89 { color: white; }
.state-65 { color: var(--font-color); }
.state-66,
.state-67 { color: var(--font-color); }
.state-88 { color: white; }
.state {
background-color: transparent;
color: black;
}
.state > span {
display: none;
white-space: nowrap;
width: max( 7em, 25%);
min-width: fit-content;
margin-left: 0.35em;
}
.state > span:before {
/* this is the background bar. the nodes textContent is placed above */
content: '>';
position: inherit;
float: left;
color: transparent;
/* position: absolute; */
background-color: transparent;
width: calc(100% - 0.41em); /* chrome: 0.35em */
margin-top: -0.2em;
height: 1.85em; /* chrome 1.8em */
margin-left: -0.52em;
margin-right: calc(-100% + 0.25em);
}
.state > span:after {
content: '>';
/* position: absolute;*/
display: inline-block;
color: transparent;
float: right;
transform: translateX(0.45em);
margin-top: -0.2em;
border-left: 0.8em solid transparent;
border-top: 0.95em solid transparent;
border-bottom: 0.95em solid transparent;
height: 1.8em;
}
.next-step {
margin-top: -0.5em;
margin-bottom: 1em;
}
.next-step:empty {
height: 0;
margin-bottom: 0em;
}
.next-step span {
display: none;
margin-top: 1em;
}
.next-step span:not(:empty):before {
margin-top: 0.5em;
content: 'Nächster Schritt: ' ;
}
.state.state-00, .state > span.state-00:before,
.state.state-01, .state > span.state-01:before,
.state.state-11, .state > span.state-11:before,
.state.state-12, .state > span.state-12:before,
.state.state-22, .state > span.state-22:before,
.state.state-72, .state > span.state-72:before,
.state.state-80, .state > span.state-80:before,
.state.state-81, .state > span.state-81:before,
.state.state-82, .state > span.state-82:before,
.state.state-81, .state > span.state-81:before { background-color: var(--yellow-02); }
.state.state-23, .state > span.state-23:before { background-color: var(--yellow-05); }
.state.state-72, .state > span.state-72:before { background-color: var(--yellow-07); }
.state.state-92, .state > span.state-92:before { background-color: var(--yellow-08); }
.state.state-33, .state > span.state-33:before,
.state.state-34, .state > span.state-34:before,
.state.state-35, .state > span.state-35:before { background-color: var(--green-02); }
.state.state-44, .state > span.state-44:before,
.state.state-45, .state > span.state-45:before,
.state.state-46, .state > span.state-46:before { background-color: var(--green-05); }
/* { background-color: var(--green-07); }*/
.state.state-55, .state > span.state-55:before,
.state.state-56, .state > span.state-56:before,
.state.state-57, .state > span.state-57:before { background-color: var(--blue-05); }
.state.state-98, .state > span.state-98:before { background-color: var(--blue-07); border-color: var(--blue-06); color: var(--font-color-data-table);}
.state.state-64, .state > span.state-64:before,
.state.state-65, .state > span.state-65:before,
.state.state-66, .state > span.state-66:before,
.state.state-67, .state > span.state-67:before { background-color: var(--violet-03); }
.state.state-68, .state > span.state-68:before,
.state.state-69, .state > span.state-69:before,
.state.state-88, .state > span.state-88:before { background-color: var(--violet-05); }
.state.state-89, .state > span.state-89:before,
.state.state-99, .state > span.state-99:before { background-color: var(--violet-07); }
.state.state-73, .state > span.state-73:before,
.state.state-74, .state > span.state-74:before,
.state.state-75, .state > span.state-75:before,
.state.state-76, .state > span.state-76:before,
.state.state-77, .state > span.state-77:before { background-color: var(--red-03); }
.state.state-83, .state > span.state-83:before,
.state.state-84, .state > span.state-84:before,
.state.state-85, .state > span.state-85:before,
.state.state-86, .state > span.state-86:before,
.state.state-78, .state > span.state-78:before { background-color: var(--red-05); }
.state.state-93, .state > span.state-93:before,
.state.state-95, .state > span.state-95:before,
.state.state-96, .state > span.state-96:before,
.state.state-97, .state > span.state-97:before { background-color: var(--red-07); }
@media (prefers-color-scheme: light) {
.state.state-55, .state > span.state-55:before,
.state.state-56, .state > span.state-56:before,
.state.state-57, .state > span.state-57:before,
.state.state-98, .state > span.state-98:before,
.state.state-64, .state > span.state-64:before,
.state.state-65, .state > span.state-65:before,
.state.state-66, .state > span.state-66:before,
.state.state-67, .state > span.state-67:before,
.state.state-68, .state > span.state-68:before,
.state.state-69, .state > span.state-69:before,
.state.state-88, .state > span.state-88:before,
.state.state-89, .state > span.state-89:before,
.state.state-99, .state > span.state-99:before,
.state.state-74, .state > span.state-74:before,
.state.state-75, .state > span.state-75:before,
.state.state-76, .state > span.state-76:before,
.state.state-77, .state > span.state-77:before,
.state.state-83, .state > span.state-83:before,
.state.state-85, .state > span.state-85:before,
.state.state-86, .state > span.state-86:before,
.state.state-78, .state > span.state-78:before,
.state.state-93, .state > span.state-93:before,
.state.state-95, .state > span.state-95:before,
.state.state-96, .state > span.state-96:before,
.state.state-97, .state > span.state-97:before,
.state > span.state-55:after,
.state > span.state-56:after,
.state > span.state-57:after,
.state > span.state-98:after,
.state > span.state-64:after,
.state > span.state-65:after,
.state > span.state-66:after,
.state > span.state-67:after,
.state > span.state-68:after,
.state > span.state-69:after,
.state > span.state-88:after,
.state > span.state-89:after,
.state > span.state-99:after,
.state > span.state-75:after,
.state > span.state-76:after,
.state > span.state-77:after,
.state > span.state-85:after,
.state > span.state-86:after,
.state > span.state-78:after,
.state > span.state-95:after,
.state > span.state-96:after,
.state > span.state-97:after {
color: var(--background-color);
}
}
.state > span.state-00:after,
.state > span.state-01:after,
.state > span.state-11:after,
.state > span.state-12:after,
.state > span.state-22:after,
.state > span.state-72:after,
.state > span.state-80:after,
.state > span.state-81:after,
.state > span.state-82:after,
.state > span.state-81:after { border-left-color: var(--yellow-03); }
.state > span.state-23:after { border-left-color: var(--yellow-05); }
.state > span.state-72:after,
.state > span.state-73:after { border-left-color: var(--yellow-07); }
.state > span.state-83:after,
.state > span.state-92:after,
.state > span.state-93:after { border-left-color: var(--yellow-08); }
.state > span.state-33:after,
.state > span.state-34:after { border-left-color: var(--green-02); }
.state > span.state-35:after { border-left-color: var(--green-02); }
.state > span.state-46:after { border-left-color: var(--green-05); }
.state > span.state-55:after,
.state > span.state-56:after,
.state > span.state-57:after { border-left-color: var(--blue-05); }
.state > span.state-98:after { border-left-color: var(--blue-07); }
.state > span.state-64:after,
.state > span.state-65:after,
.state > span.state-66:after,
.state > span.state-67:after { border-left-color: var(--violet-03); }
.state > span.state-68:after,
.state > span.state-69:after,
.state > span.state-88:after { border-left-color: var(--violet-05); }
.state > span.state-89:after,
.state > span.state-99:after { border-left-color: var(--violet-07); }
.state > span.state-74:after,
.state > span.state-75:after,
.state > span.state-76:after,
.state > span.state-77:after { border-left-color: var(--red-03); }
.state > span.state-85:after,
.state > span.state-86:after,
.state > span.state-78:after { border-left-color: var(--red-05); }
.state > span.state-95:after,
.state > span.state-96:after,
.state > span.state-97:after { border-left-color: var(--red-07); }
.state.state-01 > span.state-01,
.state.state-11 > span.state-11,
.state.state-12 > span.state-11,
.state.state-12 > span.state-12,
.state.state-23 > span.state-11,
.state.state-23 > span.state-12,
.state.state-23 > span.state-23,
.state.state-34 > span.state-23,
.state.state-34 > span.state-34,
.state.state-35 > span.state-23,
.state.state-35 > span.state-35,
.state.state-46 > span.state-23,
.state.state-46 > span.state-35,
.state.state-46 > span.state-46,
.state.state-57 > span.state-23,
.state.state-57 > span.state-35,
.state.state-57 > span.state-57,
.state.state-58 > span.state-23,
.state.state-58 > span.state-35,
.state.state-58 > span.state-58,
.state.state-59 > span.state-23,
.state.state-59 > span.state-57,
.state.state-59 > span.state-59,
.state.state-62 > span.state-11,
.state.state-62 > span.state-12,
.state.state-62 > span.state-62,
.state.state-63 > span.state-23,
.state.state-63 > span.state-63,
.state.state-64 > span.state-64,
.state.state-65 > span.state-65,
.state.state-66 > span.state-66,
.state.state-67 > span.state-67,
.state.state-68 > span.state-68,
.state.state-69 > span.state-69,
.state.state-70 > span.state-70,
.state.state-71 > span.state-71,
.state.state-72 > span.state-72,
.state.state-73 > span.state-73,
.state.state-81 > span.state-81,
.state.state-83 > span.state-23,
.state.state-83 > span.state-63,
.state.state-83 > span.state-83,
.state.state-84 > span.state-23,
.state.state-84 > span.state-84,
.state.state-86 > span.state-23,
.state.state-86 > span.state-46,
.state.state-86 > span.state-86,
.state.state-87 > span.state-87,
.state.state-88 > span.state-88,
.state.state-89 > span.state-89,
.state.state-98 > span.state-98,
.state.state-99 > span.state-99,
.state.state-01 + div span.next-01,
.state.state-11 + div span.next-11,
.state.state-12 + div span.next-12,
.state.state-23 + div span.next-23,
.state.state-34 + div span.next-34,
.state.state-35 + div span.next-35,
.state.state-46 + div span.next-46,
.state.state-57 + div span.next-57,
.state.state-58 + div span.next-58,
.state.state-59 + div span.next-59,
.state.state-62 + div span.next-62,
.state.state-63 + div span.next-63,
.state.state-64 + div span.next-64,
.state.state-65 + div span.next-65,
.state.state-66 + div span.next-66,
.state.state-67 + div span.next-67,
.state.state-68 + div span.next-68,
.state.state-69 + div span.next-69,
.state.state-70 + div span.next-70,
.state.state-71 + div span.next-71,
.state.state-72 + div span.next-72,
.state.state-81 + div span.next-81,
.state.state-83 + div span.next-83,
.state.state-84 + div span.next-84,
.state.state-86 + div span.next-86,
.state.state-87 + div span.next-87,
.state.state-88 + div span.next-88,
.state.state-89 + div span.next-89,
.state.state-98 + div span.next-98,
.state.state-99 + div span.next-99
{
display: inline-block;
}
/*
#booking_details .state.state-00 ~ div.confirmed,
#booking_details .state.state-01 ~ div.confirmed,
#booking_details .state.state-11 ~ div.confirmed,
#booking_details .state.state-12 ~ div.confirmed,
#booking_details .state.state-23 ~ div.confirmed,
#booking_details .state.state-58 ~ div.confirmed,
#booking_details .state.state-62 ~ div.confirmed,
#booking_details .state.state-63 ~ div.confirmed,
#booking_details .state.state-70 ~ div.confirmed,
#booking_details .state.state-71 ~ div.confirmed,
#booking_details .state.state-72 ~ div.confirmed,
#booking_details .state.state-81 ~ div.confirmed,
#booking_details .state.state-83 ~ div.confirmed,
#booking_details .state.state-84 ~ div.confirmed {
display: none;
} */
#booking_details .state ~div.submitted a,
#booking_details .state ~div.confirmed {
display: none;
}
#booking_details .state.state-01 ~ div .price,
#booking_details .state.state-01 ~ div.total,
#booking_details .state.state-01 ~ div.submitted a,
#booking_details .state.state-11 ~ div .price,
#booking_details .state.state-11 ~ div.total,
#booking_details .state.state-11 ~ div.submitted a,
#booking_details .state.state-12 ~ div .price,
#booking_details .state.state-12 ~ div.total,
#booking_details .state.state-12 ~ div.submitted a,
#booking_details .state.state-23 ~ div .price,
#booking_details .state.state-23 ~ div.total,
#booking_details .state.state-23 ~ div.submitted a,
#booking_details .state.state-61 ~ div .price,
#booking_details .state.state-61 ~ div.total,
#booking_details .state.state-61 ~ div.submitted a,
#booking_details .state.state-62 ~ div .price,
#booking_details .state.state-62 ~ div.total,
#booking_details .state.state-62 ~ div.submitted a,
#booking_details .state.state-63 ~ div .price,
#booking_details .state.state-63 ~ div.total,
#booking_details .state.state-63 ~ div.submitted a,
#booking_details .state.state-70 ~ div .price,
#booking_details .state.state-70 ~ div.total,
#booking_details .state.state-70 ~ div.submitted a,
#booking_details .state.state-71 ~ div .price,
#booking_details .state.state-71 ~ div.total,
#booking_details .state.state-71 ~ div.submitted a,
#booking_details .state.state-72 ~ div .price,
#booking_details .state.state-72 ~ div.total,
#booking_details .state.state-72 ~ div.submitted a,
#booking_details .state.state-81 ~ div .price,
#booking_details .state.state-81 ~ div.total,
#booking_details .state.state-81 ~ div.submitted a,
#booking_details .state.state-82 ~ div .price,
#booking_details .state.state-82 ~ div.total,
#booking_details .state.state-82 ~ div.submitted a,
#booking_details .state.state-83 ~ div .price,
#booking_details .state.state-83 ~ div.total,
#booking_details .state.state-83 ~ div.submitted a {
display: none;
}
#booking_details .comment span:first-child:not(:empty):before {
content: 'Bemerkungen: ';
}
article.booking[id="XXX-XXX"],
article.booking[id="XXX-XXX"] * {
/* hack: while no booking id is set, the handle stays invisible */
visibility: hidden;
}
article.booking .tag,
article.booking .tag.no-hover,
article.booking .tag.no-hover:hover {
position: fixed;
width: fit-content;
white-space: nowrap;
right: 0;
margin-right: -3.1em;
transform: translateX(calc(100% - 0.6em));
display: inline-block;
background-color: var(--accent-color);
color: var(--font-color);
line-height: 1em;
height: 3em;
margin-top: 1em;
padding: 0 1em;
cursor: pointer;
transition: transform 1.5s ease, margin-right 0.5s 0.3s ease;
}
article.booking .tag:before {
content: 'ticket-icon';
color: transparent;
position: absolute;
display: block;
width: 3em;
height: 3em;
margin-left: -3.5em;
background-color: var(--accent-color);
background-image: var(--icon-ticket);
background-size: 2em;
background-repeat: no-repeat;
background-position: 0.7em 0.5em;
border-radius: 1.5em 0em 0em 1.5em;
}
article.booking.show .tag {
display: none;
}
article.booking .tag.show,
article.booking .tag.show.no-hover,
article.booking .tag.show.no-hover:hover {
margin-right: 0em;
}
article.booking .tag:hover,
article.booking .tag.hover {
transform: translateX(0%);
transition: transform 0.5s ease-out, margin-right 0.3s 0s ease;
}
article.booking .tag:hover {
text-decoration: underline;
}
article.booking,
.booking input {
color: #877c72; /* darker than input text #bbad9f */
}
.booking fieldset p {
color: var(--font-color);
line-height: 1.6em;
margin-bottom: 1em;
}
.booking .confirmation label {
font-size: 1em;
}
.booking .confirmation input[type="checkbox"] {
font-size: 1em;
}
.confirmation label[for="comply"]:not(.invalid) {
font-size: 1em;
color: var(--font-color) !important;
}
.booking fieldset,
.booking fieldset input,
.booking fieldset textarea {
font-size: 1.5em;
}
.booking fieldset {
border: none;
transition: height 0.5s ease-out;
max-width: 103%;
}
.booking fieldset h3 {
margin-top: 1em;
outline: none;
}
.booking fieldset h3:before {
content: ">";
color: transparent;
position: absolute;
display: block;
/*float: right;*/
margin-left: -2em;
/*margin-right: -0.3em;*/
width: 1.5em;
/*background-image: var(--icon-unfold-less-horizontal);*/
background-image: none;
background-repeat: no-repeat;
background-size: contain;
}
.booking fieldset h3.more:hover:after {
content: " ausblenden";
}
.booking fieldset h3:before {
filter: brightness(0.4) sepia(1);
}
.booking fieldset.collapsed h3.more:hover:after {
content: " anzeigen";
}
.booking fieldset h3:hover:before,
.booking fieldset h3:focus:before {
background-image: var(--icon-contract-vertical);
cursor: pointer;
filter: none;
}
/*.booking fieldset.collapsed:not(:focus-within) {
height: 3em;
}
.booking fieldset.collapsed:focus-within * {
visibility: visible;
position: absolute;
}*/
.booking fieldset.collapsed > :not(h3) {
display: none;
}
.booking fieldset.collapsed + fieldset h3 {
margin-top: -1em;
}
.booking fieldset.collapsed h3:before {
background-image: var(--icon-contract-vertical);
}
.booking fieldset.collapsed h3:hover:before {
background-image: var(--icon-eye-open);
}
fieldset h3:hover {
color: var(--font-color);
cursor: pointer;
}
fieldset:focus-within h3,
.booking label:focus-within {
color: var(--font-color);
}
.modal fieldset h3:hover,
.modal fieldset:focus-within h3,
.modal .booking label:focus-within {
color: white; /* modal has a dark background; always use bright font color */
}
.booking label {
display: block;
clear: both;
text-align: left;
font-size: 0.7em;
line-height: 1.5em;
margin-bottom: 1em;
min-height: 3em;
}
.booking label * {
font-size: initial;
}
.booking label > * {
display: block;
text-align: left;
}
.booking label > span {
display: contents;
}
.booking input,
.booking textarea {
color: #bbad9f;
margin-top: -0.1em;
margin-left: -1px;
background-color: transparent;
padding: 0;
border: 0px solid transparent;
border-radius: 0em;
border-bottom: 2px solid #877c72;
line-height: 1.4em;
opacity: 0.7;
/* for mobile browsers */
width: -moz-available;
width: -webkit-fill-available;
/*max-width: 20em;*/
margin-right: 1em;
}
.booking input:active,
.booking input:focus,
.booking textarea:active,
.booking textarea:focus {
opacity: 1;
border-color: var(--font-color);
outline: none;
}
.modal .booking input:active,
.modal .booking input:focus,
.modal .booking textarea:active,
.modal .booking textarea:focus {
border-color: white; /* modal has a dark background; always use bright font color */
}
.booking label:focus-within,
.booking input:focus,
.booking textarea:focus,
.booking textarea:valid
.booking textarea:not(:empty)
.booking input:not([value]),
.booking input:valid {
/*border-left: 1em solid white;
margin-left: -2em;
padding-left: 1em;*/
color: var(--font-color);
opacity: 1;
}
.booking .dirty input:invalid {
color: var(--color-error) !important;
opacity: 1;
}
.booking input:-webkit-autofill,
.booking input:-webkit-autofill:focus,
.booking textarea:-webkit-autofill,
.booking textarea:-webkit-autofill:focus {
/* prevent yellow (darkmode: lightgrey) background when autofilled */
transition: background-color 600000s 0s, color 600000s 0s, -webkit-text-fill-color 600000s 0s, -webkit-box-shadow 600000s 0s;
-webkit-text-fill-color: var(--font-color);
-webkit-box-shadow: 0 0 0 30px inset;
filter: sepia(1) brightness(0.8) saturate(2.5);
}
.modal .booking input:-webkit-autofill,
.modal .booking input:-webkit-autofill:focus,
.modal .booking textarea:-webkit-autofill,
.modal .booking textarea:-webkit-autofill:focus {
-webkit-text-fill-color: white; /* modal has a dark background; always use bright font color */
}
.booking input:-webkit-autofill:focus,
.booking textarea:-webkit-autofill:focus {
filter: contrast(3.5) brightness(5.5);
}
input[type="checkbox"] {
float: left;
line-height: initial;
margin: 0;
margin-top: 0.0em;
margin-right: 0.8em;
width: 1.1em;
height: 1.5em;
accent-color: #559d55; /* #1f641f; /*lightgreen; */
opacity: 0.3;
}
input[type="checkbox"]:checked {
opacity: 1;
}
.booking input + button {
position: absolute;
visibility: hidden;
}
.booking label .tip {
display: none;
}
/* make shure multiline labels are left aligned neatly even if 3 lines are required */
.options label {
margin-left: 2.75em;
}
.options label:hover,
.options label:focus-within {
color: var(--font-color);
font-weight: 600;
}
.options label input[type="checkbox"] {
position: absolute;
margin-left: -1.75em;
/* 2025-01: to margin reduced to align texst with checkbox */
margin-top: -0.3em;
}
label:before {
/* was bezweckt dieses element ?? */
content: "?";
color: transparent;
display: inline-block;
float: right;
font-size: 1.15rem;
margin-top: 1.3em;
margin-right: -0.3em;
width: 1.2em;
/*background-image: var(--icon-check-1);*/
background-repeat: no-repeat;
background-size: contain;
}
@media only screen and (min-width: 1024px) {
label:before {
margin-top: 1.8em;
}
}
.login.modal label:before {
margin-top: 0.8em;
}
label.valid:before {
background-image: var(--icon-check-1);
filter: brightness(0.8);
transition: filter 1s ease-out;
}
/* label.invalid .tip {
display: block;
} /* show_msg is used to direct the users attention */
label.invalid:before {
background-image: var(--icon-alert-circle);
transition: filter 0s;
}
label.uploaded:before {
background-image: var(--icon-check-2);
opacity: 0.85; /* start near the opacity of the finished valid animation */
filter: grayscale(100%) brightness(30%);
transition: filter 2s ease-out, opacity 2s ease-out;
}
@media (prefers-color-scheme: light) {
label.uploaded:before {
opacity: 0.25;
}
}
.options label[for]::before,
label[for="comply"]::before {
/* font-size: 0.8rem; */
margin-top: 1em;
font-size: 1.15rem;
}
fieldset.invalid h3 {
color: var(--color-error);
opacity: 1;
}
label.invalid {
color: var(--color-error);
opacity: 1;
font-weight: 400;
}
/*input:invalid,*/
label.invalid input,
.booking label.invalid input {
color: var(--color-error);
border-bottom-color: var(--color-error);
font-weight: var(--font-weight);
}
.booking .modal > div {
position: absolute;
top: 5%;
transform: translate(-54%, 0%);
}
nav {
left: 0;
padding-left: 2.5em;
}
nav:before {
background-image: var(--icon-menu);
}
#content {
/*display: none;*/
margin-top: 0.5em;
}
h1 {
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 0.1em;
}
h2 {
text-transform: uppercase;
font-size: 1.3em;
letter-spacing: 0.13em;
}
h2, h3, h4, h5, h6 {
/* to align the baseline with the menu icon when jumping to a section anchor */
padding-top: 0.8em;
}
.request-toggles {
float: right;
}
label.tableheader {
display: inline-block;
/* float: right;*/
margin: 0;
margin-right: 1em;
padding: 0;
}
label.tableheader:last-child {
margin-right: -1em;
}
label.tableheader input[type="checkbox"] {
float: right;
/* padding-left: 0; */
margin-left: 0.5em;
margin-right: 0;
/* width: 1.1em; */
}
button {
letter-spacing: var(--letter-spacing);
}
a,
a:link,
a:visited,
a:active {
color: var(--font-color);
text-decoration-color: var(--accent-color-t3);
hyphens: manual;
}
a:not(.btn):hover,
a:not(.btn):link:hover {
background-color: var(--accent-color);
text-decoration-color: transparent;
}
article a:not(.btn):hover,
article a:not(.btn):link:hover {
/* article rule to exclude nav li */
border: 0.2em solid var(--accent-color);
border-width: 0.2em;
margin: 0em -0.2em;
}
a:not(.btn)[target="_blank"]:hover:after,
a:not(.btn)[target="_blank"]:link:hover:after {
content: "↗︎";
position: absolute;
display: -webkit-inline-box;
padding: 0em 0.2em;
margin-left: 0.15em;
background-color: var(--accent-color);
}
a.btn,
button {
background-color: #a87e53;
background-color: var(--accent-color);
color: #0d0d19;
padding: 0.2em 1.2em;
margin-top: 1em;
margin-right: 1em;
display: inline-block;
width: auto;
height: 2em;
min-width: 9.3em; /* 2 buttons on iPhone SE (3rd Gen with front facing round TouchID button) */
/*width: 17%;*/
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
vertical-align: top; /* without vertical align, rounding errors in Safari may cause buttons to jump on hover */
line-height: var(--line-height); /* in the input form, line haight in p tags ist enlarged */
}
a.btn.light,
button.light {
line-height: 1.7em;
color: var(--font-color);
border: 1px solid var(--font-color);
background-color: transparent;
}
a.btn:hover,
button:hover {
filter: brightness(1.2);
}
a.btn.light:hover,
button.light:hover {
background-color: var(--selection-color);
}
a.btn[href^="http"]:hover:after {
/* reminder: an attribute is added by the md converter, but removed over js fo local links */
content: "➝";
position: absolute;
margin-left: 0.1em;
transform: rotate(-45deg);
}
section:not(.modal) a.btn[href^="#"]:hover:after {
content: "➝";
position: absolute;
transform: rotate(90deg);
margin-left: 0.1em;
}
strong {
/*white-space: nowrap;*/
}
#cookie_dump {
/*position: absolute;*/
display: block;
/*float: left;*/
/*bottom: 0px;*/
/*background-color: #8c6e53;*/
/*padding: 0 1em;*/
padding: 0 !important;
line-height: 1.3em;
/*border-top: 1px solid white;*/
margin-top: 1em;
margin-bottom: 1em;
}
#cookie_dump pre {
/*font-size: 0.8em;*/
width: inherit;
width: --webkit-fill-available;
}
#cookie_dump div {
display: inline-grid;
}/*
#cookie_dump a.btn.icon-only {
background-color: transparent;
width: var(--icon-size);
min-width: initial;
padding: 0;
float: right;
margin-right: 0;
}*/
#cookie_dump a.btn:hover:after {
display: none;
}
dd.inactive #content.nobefore {
/* without :before */
padding: 0.4em 1.5em 2em 1.5em;
/* background-color: var(--background-color); */
/* content: "\200b"; */
/* position: absolute; */
z-index: -1;
min-height: 110vh;
width: 92%;
/* margin: -0.5em 0em 0 -2em; */
/* width: 100%; */
background-image: var(--img-sawteeth);
background-repeat-x: no-repeat;
background-position: right;
background-size: 200%;
overflow: hidden;
}
dd.inactive #content.nobefore:before {
visibility: none;
}
:root {
/* set default height */
--cookie-banner-min-height: 4em;
}
.modal {
width: 100%;
height: 100%;
background-color: transparent;
transform: translateX(-1000%);
}
.modal.show {
width: 100%;
height: 100%;
background-color: #000000AA;
transform: translateX(0%);
color: var(--font-color);
}
.modal:not(.notes) > div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-54%, -50%); /* reduced from 70% to 50% 2024-06-12 by dam */
width: 50%;
min-width: calc(min(30em , 90vw));
max-width: 50em;
/* height: 200px;*/
}
.modal > div:empty {
visibility: hidden;
}
.modal a,
.modal a:link,
.modal a:visited,
.modal a:active {
color: white; /* var(--font-color); doesn't work since .modal always has a dark background */
}
.modal label:focus-within,
.modal input:focus,
.modal textarea:focus,
.modal textarea:valid,
.modal textarea:not(:empty),
.modal input:not([value]),
.modal input:valid {
/*border-left: 1em solid white;
margin-left: -2em;
padding-left: 1em;*/
color: white; /* var(--font-color); doesn't work since .modal always has a dark background */
opacity: 1;
}
#footer {
padding-bottom: 2em;
/*transition: padding-bottom 1s ease;*/
}
body.show-cookie-banner #footer {
/* make space at the bottom for the fixed cookie panel */
/* padding-bottom: calc(var(--cookie-banner-min-height) + 0.5em); /* replaced by margin-bottm */
/* replaces body.show-cookie-banner #footer */
margin-bottom: var(--cookie-banner-min-height);
}
body #cookie_toggle:after {
content: " anzeigen";
}
body.show-cookie-banner #cookie_toggle:after {
content: " ausblenden";
}
footer#cookie-banner {
position: fixed;
z-index: 200;
left: 0;
bottom: -366px;
width: 100vw;
height: auto;
min-height: var(--cookie-banner-min-height);
background-color: var(--accent-color);
margin: 0;
padding: 0;
padding-left: 1em;
padding-bottom: 0.8em;
transition: bottom 1s ease;
font-size: 0.9em;
line-height: 1.7em;
}
.cookie-banner,
#cookie_dump {
height: auto;
display: flex;
flex-direction: row;
/* override respionsive paddings based on var(--column-padding-inner-factor) */
padding: 0em 1em 0em 0em !important;
justify-content: space-between;
}
.cookie-banner > p{
display: block;
}
.cookie-banner a {
white-space: nowrap;
}
.modal a.btn,
.cookie-banner a.btn,
#cookie_dump a.btn {
line-height: 1.7em;
color: var(--font-color);
border: 1px solid var(--font-color);
background-color: transparent;
min-width: 13.9em; /* dam 2023-07-05 extended from 12.8 to 13.9 */
margin: 0.5em 0em 0.5em 2em;
/*margin-left: 2em;
margin-right: 0em;
margin-top: 0.5em;
margin-bottom: 0.5em;*/
/*align-self: flex-end;*/
white-space: nowrap;
}
.modal a.btn {
margin: 0.5em 2em 0.5em 0em;
letter-spacing: 0.15em;
}
.modal a.btn:hover,
#cookie-banner a.btn:hover,
#cookie-banner a.btn:active {
background-color: var(--selection-color);
border-color: var(--selection-color);
}
.cookie-banner a.btn:after {
content: '';
display: none;
}
.modal a.btn.btn-default,
a.btn.btn-default,
button.btn-default,
.cookie-banner > p > a.btn:first-child {
color: var(--accent-color);
background-color: var(--font-color);
}
.modal a.btn.btn-default:hover,
a.btn.btn-default:hover,
button.btn-default:hover,
.cookie-banner > p > a.btn:first-child:hover {
color: var(--font-color);
background-color: var(--selection-color);
border-color: var(--selection-color);;
}
@media (prefers-color-scheme: light) {
.modal a.btn {
background-color: #a3aaa5 /*#0d0d19;*/
}
.modal a.btn:hover {
border-color: var(--accent-color);
color: var(--font-color);
}
.modal a.btn.btn-default {
color: black;
background-color: white;
}
.modal a.btn.btn-default:hover {
}
}
#cookie_toggle {
padding-left: 0.25em;
}
#footer + #cookie_toggle {
/* hide cookie-toggle as long as it's autside the footer. will be inserted on load */
display: none;
}
body.show-cookie-banner #cookie-banner {
bottom: 0;
}
/* #editor-dim {
display: block;
z-index: 100;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: var(--editor-backgroundcolor);
background-blend-mode: multiply;
} */
html:not(.admin) [contenteditable] {
cursor: default;
}
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
[contenteditable="true"]:focus {
outline: none;
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
span.state {
display: inline-block;
font-size: 80%;
width: 1.5em;
height: 1.5em;
background-color: #dada64;
border: 1px solid var(--state-border);
color: black;
line-height: 1.4em;
text-align: center;
letter-spacing: -0.0em;
font-weight: bold;
border-radius: 0.25em;
margin: 0px 0.15em;
margin-right: 0.45em;
}
span.state.state2 { background-color: #fbf289 }
span.state.state3 { background-color: #a0d4b1 }
span.state.state4 { background-color: #03b3b3 } /* zu grün #57bc92 */
span.state.state7 { background-color: #27aae1 }
/* .data.table Table editor for admins */
.data-table th,
.data-table td {
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
/* width: fit-content;*/ /* this rule breaks the intended fixed/dynamic col width rules framework */
transition: border 0.3s 0.3s ease-out;
min-height: 1.7em; /* added 2023-11-14 */
}
tr.filter {
--selection-color: var(--filter-accent-color);
}
.data-table .filter-btn.active ~ table tr.filter:after {
/* force height of empty filter row if active */
content: "|";
display: block;
height: 1.7em;
border: 1px solid green;
box-sizing: content-box;
color: transparent;
visibility: hidden;
}
.data-table col.hide {
width: 0% !important;
}
.data-table tr.filter th {
/* will be disabled in the labels column if others are shown*/
/* border-top: 1px solid var(--font-color);*/
display: none;
}
.data-table .filter-btn:not(.active) ~ table .filter {
/* non-empty filter > th are displayed on .label > th :hover. To prevent tr.labels growing to 1px wo force them to collapse */
visibility: collapse;
}
.data-table .filter-btn:hover ~ table .filter {
transition: none;
}
.data-table .filter-btn.active ~ table .labels th {
/* make line from .filter below visible */
border: none;
}
.data-table tr.line th {
border-bottom: 2px solid var(--font-color);
}
.data-table tr.filter th {
display: none; /* table-row; */
}
.data-table tr.filter th:hover,
.data-table tr.filter th:focus {
overflow: visible;
}
.data-table .filter-btn.active ~ table tr.filter th:empty:after {
content: "Empty cell";
font-size: 1em;
color: blueviolet;
/* visibility: hidden;*/
}
.data-table .filter-btn.active ~ table tr.filter th,
.data-table .filter-btn.active ~ table tr.filter:hover th {
display: table-cell; /* table-row; */
border-top: 2px solid var(--filter-accent-color);
border-bottom: 2px solid var(--filter-accent-color);
cursor: text;
}
.data-table th.align-right,
.data-table td.align-right {
padding-right: 0.5em; /* same as left aligned */
}
.data-table td span.weekday {
float: left ;
}
.data-table th:empty::before {
/* pseudo-placeholder */
/* force display of empty foilter cells */
content:'filtertext';
overflow: hidden;
opacity: 0;
margin-right: -1.7em;
}
.data-table td:empty::before {
/* force display of empty foilter cells */
content:'x';
visibility: hidden;
}
.data-table tr:not(:focus-within) th:hover:empty::before,
.data-table tr th:focus:empty::before {
/* force display of empty foilter cells */
opacity: 0.2;
}
.data-table .spacer {
transform: translateY(-2px);
cursor: row-resize;
}
.data-table .spacer th {
font-size: 0px;
line-height: 4px;
border: none;
}
.data-table .filter-btn.active:not(:hover):not(.hover) ~ table tr.filter:not(:hover) th:empty {
/* color of the top and bottom borders of all empty filter cells, if mouse hover doesn't force the lines to be violet */
/* border-color: grey; /* disabled 2023-11-17 */
}
.data-table .filter-btn.active ~ table tr.filter th:hover {
background-color: var(--editor-backgroundcolor);
}
.data-table tr.filter th:not(:empty):not(:focus) {
color: var(--filter-accent-color);
text-shadow: 0px 0px 1px #ff00b855;
font-weight: 500;
-webkit-font-smoothing: auto;
}
.db-table .filter-btn.active ~ table tr.line th {
border-bottom-width: 0px;
}
.data-table th {
transition: border-color 0.3s 0.3s ease-out;
}
.data-table tr:hover td {
transition: background-color 0.1s ease-out;
background-color: var(--tablerow-hover-color);
/* font-weight: calc(var(--font-weight) + 100);*/
color: var(--font-color);
}
.data-table .filter th {
border-bottom: 2px;
}
/* to filter the table, the table receives .filter-idx-N (N = index), that hides all data-idx-N except .show */
.db-table.filter-idx-0 > tbody > tr.hide-idx-0,
.db-table.filter-idx-1 > tbody > tr.hide-idx-1,
.db-table.filter-idx-2 > tbody > tr.hide-idx-2,
.db-table.filter-idx-3 > tbody > tr.hide-idx-3,
.db-table.filter-idx-4 > tbody > tr.hide-idx-4,
.db-table.filter-idx-5 > tbody > tr.hide-idx-5,
.db-table.filter-idx-6 > tbody > tr.hide-idx-6,
.db-table.filter-idx-7 > tbody > tr.hide-idx-7,
.db-table.filter-idx-8 > tbody > tr.hide-idx-8,
.db-table.filter-idx-9 > tbody > tr.hide-idx-9,
.db-table.filter-idx-10 > tbody > tr.hide-idx-10,
.db-table.filter-idx-11 > tbody > tr.hide-idx-11,
.db-table.filter-idx-12 > tbody > tr.hide-idx-12,
.db-table.filter-idx-13 > tbody > tr.hide-idx-13,
.db-table.filter-idx-14 > tbody > tr.hide-idx-14,
.db-table.filter-idx-15 > tbody > tr.hide-idx-15,
.db-table.filter-idx-16 > tbody > tr.hide-idx-16,
.db-table.filter-idx-17 > tbody > tr.hide-idx-17,
.db-table.filter-idx-18 > tbody > tr.hide-idx-18,
.db-table.filter-idx-19 > tbody > tr.hide-idx-19,
.db-table.filter-idx-20 > tbody > tr.hide-idx-20,
.db-table.filter-idx-21 > tbody > tr.hide-idx-21,
.db-table.filter-idx-22 > tbody > tr.hide-idx-22,
.db-table.filter-idx-23 > tbody > tr.hide-idx-23,
.db-table.filter-idx-24 > tbody > tr.hide-idx-24,
.db-table.filter-idx-25 > tbody > tr.hide-idx-25,
.db-table.filter-idx-26 > tbody > tr.hide-idx-26,
.db-table.filter-idx-27 > tbody > tr.hide-idx-27,
.db-table.filter-idx-28 > tbody > tr.hide-idx-28,
.db-table.filter-idx-29 > tbody > tr.hide-idx-29,
.db-table.filter-idx-30 > tbody > tr.hide-idx-30,
.db-table.filter-idx-31 > tbody > tr.hide-idx-31,
.db-table.filter-idx-32 > tbody > tr.hide-idx-32,
.db-table.filter-idx-33 > tbody > tr.hide-idx-33,
.db-table.filter-idx-34 > tbody > tr.hide-idx-34,
.db-table.filter-idx-35 > tbody > tr.hide-idx-35,
.db-table.filter-idx-36 > tbody > tr.hide-idx-36,
.db-table.filter-idx-37 > tbody > tr.hide-idx-37,
.db-table.filter-idx-38 > tbody > tr.hide-idx-38,
.db-table.filter-idx-39 > tbody > tr.hide-idx-39,
.db-table.filter-idx-40 > tbody > tr.hide-idx-40,
.db-table.filter-idx-41 > tbody > tr.hide-idx-41,
.db-table.filter-idx-42 > tbody > tr.hide-idx-42,
.db-table.filter-idx-43 > tbody > tr.hide-idx-43,
.db-table.filter-idx-44 > tbody > tr.hide-idx-44,
.db-table.filter-idx-45 > tbody > tr.hide-idx-45,
.db-table.filter-idx-46 > tbody > tr.hide-idx-46,
.db-table.filter-idx-47 > tbody > tr.hide-idx-47,
.db-table.filter-idx-48 > tbody > tr.hide-idx-48,
.db-table.filter-idx-49 > tbody > tr.hide-idx-49,
.db-table.filter-idx-50 > tbody > tr.hide-idx-50,
.db-table.filter-idx-51 > tbody > tr.hide-idx-51,
.db-table.filter-idx-52 > tbody > tr.hide-idx-52,
.db-table.filter-idx-53 > tbody > tr.hide-idx-53,
.db-table.filter-idx-54 > tbody > tr.hide-idx-54,
.db-table.filter-idx-55 > tbody > tr.hide-idx-55,
.db-table.filter-idx-56 > tbody > tr.hide-idx-56,
.db-table.filter-idx-57 > tbody > tr.hide-idx-57,
.db-table.filter-idx-58 > tbody > tr.hide-idx-58,
.db-table.filter-idx-59 > tbody > tr.hide-idx-59,
.db-table.filter-idx-60 > tbody > tr.hide-idx-60,
.db-table.filter-idx-61 > tbody > tr.hide-idx-61,
.db-table.filter-idx-62 > tbody > tr.hide-idx-62,
.db-table.filter-idx-63 > tbody > tr.hide-idx-63,
.db-table.filter-idx-64 > tbody > tr.hide-idx-64,
.db-table.filter-idx-65 > tbody > tr.hide-idx-65,
.db-table.filter-idx-66 > tbody > tr.hide-idx-66,
.db-table.filter-idx-67 > tbody > tr.hide-idx-67,
.db-table.filter-idx-68 > tbody > tr.hide-idx-68,
.db-table.filter-idx-69 > tbody > tr.hide-idx-69,
.db-table.filter-idx-70 > tbody > tr.hide-idx-70,
.db-table.filter-idx-71 > tbody > tr.hide-idx-71,
.db-table.filter-idx-72 > tbody > tr.hide-idx-72,
.db-table.filter-idx-73 > tbody > tr.hide-idx-73,
.db-table.filter-idx-74 > tbody > tr.hide-idx-74,
.db-table.filter-idx-75 > tbody > tr.hide-idx-75,
.db-table.filter-idx-76 > tbody > tr.hide-idx-76,
.db-table.filter-idx-77 > tbody > tr.hide-idx-77,
.db-table.filter-idx-78 > tbody > tr.hide-idx-78,
.db-table.filter-idx-79 > tbody > tr.hide-idx-79,
.db-table.filter-idx-80 > tbody > tr.hide-idx-80,
.db-table.filter-idx-81 > tbody > tr.hide-idx-81,
.db-table.filter-idx-82 > tbody > tr.hide-idx-82,
.db-table.filter-idx-83 > tbody > tr.hide-idx-83,
.db-table.filter-idx-84 > tbody > tr.hide-idx-84,
.db-table.filter-idx-85 > tbody > tr.hide-idx-85,
.db-table.filter-idx-86 > tbody > tr.hide-idx-86,
.db-table.filter-idx-87 > tbody > tr.hide-idx-87,
.db-table.filter-idx-88 > tbody > tr.hide-idx-88,
.db-table.filter-idx-89 > tbody > tr.hide-idx-89,
.db-table.filter-idx-90 > tbody > tr.hide-idx-90,
.db-table.filter-idx-91 > tbody > tr.hide-idx-91,
.db-table.filter-idx-92 > tbody > tr.hide-idx-92,
.db-table.filter-idx-93 > tbody > tr.hide-idx-93,
.db-table.filter-idx-94 > tbody > tr.hide-idx-94,
.db-table.filter-idx-95 > tbody > tr.hide-idx-95,
.db-table.filter-idx-96 > tbody > tr.hide-idx-96,
.db-table.filter-idx-97 > tbody > tr.hide-idx-97,
.db-table.filter-idx-98 > tbody > tr.hide-idx-98,
.db-table.filter-idx-99 > tbody > tr.hide-idx-99,
.db-table.filter-idx-100 > tbody > tr.hide-idx-100,
.db-table.filter-idx-101 > tbody > tr.hide-idx-101,
.db-table.filter-idx-102 > tbody > tr.hide-idx-102,
.db-table.filter-idx-103 > tbody > tr.hide-idx-103,
.db-table.filter-idx-104 > tbody > tr.hide-idx-104,
.db-table.filter-idx-105 > tbody > tr.hide-idx-105,
.db-table.filter-idx-106 > tbody > tr.hide-idx-106,
.db-table.filter-idx-107 > tbody > tr.hide-idx-107,
.db-table.filter-idx-108 > tbody > tr.hide-idx-108,
.db-table.filter-idx-109 > tbody > tr.hide-idx-109 {
display: none !important;
}
/* .data-table > .db-table > tbody tr.filtered {
display: none !important;
}
*/ /*.data-table .filter-btn.collapsed .filter th {
display: none;
}*/
.data-table td {
border-bottom: 1px solid transparent;
transition: background-color 0.3s 0.1s ease-out;
}
.data-table td.btn {
cursor: pointer;
max-width: 1.7em;
}
.data-table td.btn:hover,
.data-table td.btn:focus-within {
background-color: var(--accent-color);
}
.data-table td a.btn {
/* display: inline-block;*/
color: transparent;
background-color: transparent;
margin-top: -0.1em;
margin-bottom: -0.1em;
margin-left: -2px;
margin-right: 0.2em;
width: 1.5em;
height: 1.5em;
padding: 0;
min-width: unset;
background-size: 1.5em;
background-position: center;
}
.data-table td a.btn:focus {
background-color: var(--accent-color);
outline: none;
}
.data-table td a.btn:hover:after {
content: "";
}
.data-table td[data-label="action"] {
min-width: fit-content !important;
opacity: 0.25;
transition: opacity 0.3s 0.1s;
overflow: visible !important;
}
.data-table [data-label="action"] :first-child {
translate: -0.25em;
}
.data-table tr:hover [data-label="action"] {
opacity: 1;
transition: opacity 0s;
}
.data-table [data-label="action"] .list-remove-btn {
background-image: var(--icon-playlist-remove);
}
body:has(.patch.dev) .data-table [data-label="action"] .create-bill {
/* DEBUG option not implemented -> suppressed in PROD only visible in DEV due to body:has(.patch.dev) */
background-image: var(--icon-qr-code-add)
}
.data-table [data-label="action"] .invite {
background-image: var(--icon-person-add);
}
.data-table [data-label="action"] .invite:hover {
background-image: var(--icon-send);
background-color: var(--green-03);
}
.data.table tr.hover td {
background-color: var(--tablerow-hover-color);
}
.data-table td[data-label="notes"]:not(:empty) {
color: transparent !important;
background-image: var(--icon-chat-bubble-outline);
background-repeat: no-repeat;
background-position-y: 0.2em;
background-position: bottom;
transform: translatex(-0.1em) translateY(0.05em);
background-size: 1.6em;
opacity: 0.6;
transition: opacity 0;
}
.data-table tr:hover td[data-label="notes"]:not(:empty) {
color: transparent !important;
background-image: var(--icon-chat-bubble);
background-repeat: no-repeat;
opacity: 1;
filter: brightness(0.5) sepia(1) saturate(2) hue-rotate(-23.2deg);
cursor: context-menu;
}
@media (prefers-color-scheme: dark) {
.data-table tr:hover td[data-label="notes"]:not(:empty) {
filter: brightness(0.5) sepia(1) saturate(2) hue-rotate(-23.2deg);
}
}
.data-table .icon_tag:before,
.data-table .icon_empty:before,
.data-table .icon_member:before {
content: "▢";
color: transparent !important;
width: 1.5em;
height: 1.7em;
margin-left: -0.2em;
margin-right: -0.2em;
display: inline-block;
background-image: none;
background-size: 1.7em;
background-repeat: no-repeat;
/* background-position-y: 0.25em;*/
opacity: 0.6;
}
.data-table tr:hover .icon_tag:before,
.data-table tr:hover .icon_empty:before,
.data-table tr:hover .icon_member:before {
opacity: 1;
}
.data-table .icon_member:before {
content: "★";
background-image: var(--icon-star-filled);
}
.data-table .icon_tag:before {
content: "⌦";
background-image: var(--icon-label);
background-size: 1.9em;
background-position: bottom;
margin-top: 0.0em;
transform: translateX(0.1em) translateY(0.15em);
}
.data-table .editor:focus-within ~ table tr:hover td {
/* remove default from base-layout.css*/
background-color: transparent;
}
.data-table .edit-btn.active ~ table tr.hover td,
.data-table .editor:not(:focus-within) .edit-btn.active ~table tr:hover td {
background-color: var(--editor-tablerow-hover-color);
transition: background-color 0.1s ease-out;
}
.data-table .filter-btn,
.data-table .edit-btn {
position: absolute;
min-width: 2em;
height: 2em;
white-space: nowrap;
background-size: 1.5em;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.3;
transition: opacity 0.3s 0.3s ease-out, background-color 0.3s 0.6s ease-out, background-image 0s 0.6s, margin-top 0.1s ease-out;
cursor: pointer;
}
.data-table .btn:hover,
.data-table .data-table-options .btn:hover {
/* important rules prevent button dimming after manual click */
opacity: 1 !important;
background-color: var(--accent-color) !important;
transition: opacity 0s, background-color 0s, background-image 0s;
cursor: pointer;
}
.data-table .filter-btn {
/* margin-top: -2px; /* modified 2023-11-11, was not like in the prototype anymore */
margin-left: -3em;
background-image: var(--icon-filter);
/* transition: margin-top 0.2s ease-out; /* transition definition in .data-table .filter-btn:hover, .data-table .filter-btn.hover, .data-table .filter-btn.active */
}
.data-table .filter-btn.active {
margin-top: 1.7em;
}
.data-table .filter-btn:hover,
.data-table .filter-btn.hover,
.data-table .filter-btn.active {
opacity: 1;
/* filter: invert(100%);*/
background-color: var(--filter-accent-color); /* #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
.data-table .filter-btn:hover ~ table th,
.data-table .filter-btn.hover ~ table th,
.data-table .filter-btn.active ~ table th {
border-color: var(--filter-accent-color);
transition: border-color 0.1s ease-out;
}
.data-table td.filtered,
.data-table col.filtered {
color: var(--font-tableedit-filtercol);
}
.data-table .spacer tr {
border-bottom: 12px solid transparent;
}
.data-table .edit-btn {
/* shares a lot with .filter-btn */
margin-top: 2em;
margin-left: -3em;
background-image: var(--icon-pencil);
background-size: 67%;
}
.data-table .filter-btn.active ~.edit-btn {
margin-top: calc(3.8em + 2px)
}
/* .data-table .edit-btn {
}
*/ .data-table .edit-btn:hover,
.data-table .edit-btn.active {
opacity: 1;
background-color: #7800b4; /* violet, not fuchsia #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
.data-table .edit-btn.active:hover {
background-color: transparent;
}
.data-table .edit-btn:not(.active):hover ~ table tbody,
.data-table .edit-btn ~ .editor:focus-within ~ table tbody {
color: var(--font-color-not-edited);
}
.data-table .edit-btn.active ~ .editor {
}
.data-table .data-table-options {
position: absolute;
/* background-color: #ff000029;*/
right: 1em;
display: flex;
flex-flow: row;
justify-content: flex-end;
margin-top: -2.5em;
right: 1.5em;
}
.data-table .view-presets {
display: flex;
flex-flow: row;
justify-content: flex-end;
margin-right: 2em;
}
.data-table .data-table-options .btn {
position: inline-block;
min-width: 2em;
height: 2em;
margin-left: 2px;
white-space: nowrap;
background-size: 1.5em;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.3;
transition: opacity 0.3s 0.3s ease-out, background-color 0.3s 0.6s ease-out, background-image 0s 0.6s;
cursor: pointer;
}
.data-table .btn.find-item {
/* right: 4.4em;*/
background-image: var(--icon-search);
}
.data-table .add-item {
/* right: 5.8em;*/
background-image: var(--icon-playlist-add);
}
.data-table .refresh {
/* right: 8em;*/
background-image: var(--icon-autorenew);
/*position: absolute;
right: 8em;
margin-top: -3.1em;
display: block;
width: 2em;
height: 2em;
z-index: 1000;
content: "active";
color: var(--text-color);
opacity*/
}
.data-table .view-reset {
background-image: var(--icon-first-page);
}
.data-table .remove.filter {
background-image: var(--icon-filter-remove);
}
.data-table .reset.filter {
background-image: var(--icon-filter-reset);
}
.data-table:not(.view-modified) .view-reset {
display: none;
}
.data-table .filter-members {
background-image: var(--icon-star);
background-size: 1.8em;
}
.data-table .filter-members:hover {
background-image: var(--icon-star-filled);
}
.data-table .show-deleted {
background-image: var(--icon-disabled-visible);
}
.data-table .add-item:hover
.data-table .refresh:hover {
background-image: var(--icon-refresh);
cursor: pointer;
}
.data-table .refresh.active {
opacity: 1;
background-image: none;
}
.data-table .refresh.active:after {
content: "\27F3";
color: transparent;
position: absolute;
width: 2em;
height: 2em;
/* margin-left: -1.75em;*/
background-color: inherit;
border-radius: 1em;
background-size: 1.7em;
background-position: center center;
background-repeat: no-repeat;
background-image: var(--icon-refresh);
/* rotation animation kudos to Andreas I Perez @https://stackoverflow.com/a/7310379 */
-webkit-animation-name: rotate;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
.data-table .options {
/* shares a lot with .filter-btn */
/* right: 2em;*/
margin-top: 1em;
margin-left: -3em;
background-image: var(--icon-dots-horizontal);
}
.data-table .options:hover,
/* .data-table .options.hover,*/
.data-table .options.active {
opacity: 1;
/* filter: invert(100%);*/
background-color: var(--accent-color); /* #B40082; */
transition: opacity 0.1s ease-out, background-color 0.1s ease-out;
}
/* .data-table .edit-btn ~ .editor:focus-within ~ table tbody {
color: var(--font-color-not-edited);
}
*/ .editor {
display: none;
position: absolute;
z-index: 1000;
}
.data-table .edit-btn.active ~ .editor {
display: block;
}
/* .data-table .edit-btn:not(.active) .editor:hover tr.hover td{
}*/
.data-table:not(.show-deleted) tr.deleted {
display: none !important;
}
.editor .td {
display: table-cell;
padding: 1px;
padding-left: 0.15em;
outline: none;
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-user-select: text;
user-select: text;
color: transparent;
}
.editor .td:focus {
color: var(--font-color);
}
/* sagi homepage banner pan*/
.banner {
overflow: hidden;
max-height: 16em;
height: 10em;
margin-right: 2em;
margin-bottom: -1em;
}
.banner img {
/*width: 250%;*/
/*height: auto;*/
width: auto;
height: 190%;
float: right;
max-width: initial;
max-height: initial;
margin-top: -1em;
transform: translateX(20px);
}
.banner + p {
display: flex;
margin-right: 0em;
/* on small screens, only two buttons are displayed (left aligned) */
/*justify-content: space-between;*/
/*flex-wrap: wrap;*/
}
body.no-js #sagi-map {
height: 9em;
overflow: hidden;
}
.backend .modal {
--labels_width: 8em;
--form-spacing: 1em;
}
.backend .modal label {
display: inline-block;
height: 2em;
width: var(--labels_width);
text-align: right;
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
.backend .modal label:before {
display: none;
}
.backend .modal label.required:after {
content: "*";
display: inline-block;
padding-left: 0.1em; /* thin space */
}
.backend .modal label:focus-within {
opacity: 1;
transition-delay: 0s;
}
.backend .modal input,
.backend .modal textarea {
display: inline-block;
/* position: absolute;*/
/* left: 11em;*/
width: 30em;
margin-left: var(--form-spacing);
/* margin-top: -0.3em;*/
background-color: transparent;
color: var(--font-color);
border: 1px solid transparent;
border-bottom-color: var(--tablerow-hover-color);
padding: 0;
font-size: 100%;
letter-spacing: var(--letter-spacing);
}
.backend .modal input:focus,
.backend .modal textarea:focus {
outline:none;
border-bottom-color: var(--accent-color);
box-shadow: 0px 1px 0px -0.2px var(--accent-color);
}
.backend .modal a.btn {
display: block;
margin-left: calc(var(--labels_width) + var(--form-spacing));
min-width: 12em;
width: fit-content;
}
.backend .modal a.btn:focus {
outline: none;
background-color: var(--accent-color);
border-color: var(--accent-color);
}
/* page editor, only needed for administrators */
/* needs rework. content editor should use .ce instead of .admin */
/* the Admin Backend uses the same md-parser.html which will be extended by admin.js */
html:not(.admin) .admin {
display: none !important; /* important rule for body.no-js nav:hover */
}
html.admin footer {
/* display: none;*/
}
html.admin nav .admin {
/* only for nav menu?? */
color: var(--font-color-not-edited);
color: var(--accent-color);
}
html.admin nav li.admin:before {
content: "lock";
color: transparent;
display: inline-block;
float: right;
width: 1em;
height: 1em;
overflow: hidden;
background-repeat: no-repeat;
background-size: 1em;
background-image: var(--icon-locked);
filter: hue-rotate(49deg) opacity(0.76) brightness(1.6) saturate(0.45);
cursor: pointer;
}
html.admin nav.auth-ok li.admin:before {
background-image: var(--icon-unlocked);
filter: none;
}
.backend #content section:first-of-type h1 { /* 2011-11-17 changed from .admin to .backend */
margin-top: 1.5em;
}
html.backend #content .collapsible:not(.collapsed) h1:after {
content: attr(data-filtered) attr(data-summary);
font-size: calc(var(--font-size) * var(--backend-zoom));
font-weight: var(--font-weight);
letter-spacing: var(--letter-spacing);
margin-left: 3em;
text-transform: none;
}
html.backend #content .collapsible:not(.collapsed) h1[data-filtered]:after {
color: var(--filter-accent-color);
text-shadow: 0px 0px 1px #ff00b855;
font-weight: 500;
-webkit-font-smoothing: auto;
}
.hide_on_portrait_phones {
/*display: none !important;*/
position: absolute;
left: -1000em;
}
.hide_on_smartphones {
display: none !important;
}
.show_on_portrait_smartphones_only {
/*display: inherit;*/
}
.show_on_smartphones_only {
/*display: inherit;*/
}
.show_on_desktop_only {
/* display: none !important;*/
visibility: hidden;
}
body:has(.booking.show) { /* prevent scrolling of the sawteeth while a scrollable booking form is displayed */
height: 100vh;
overflow-y: hidden;
}
body:has(.booking.show) .plank,
body:has(.booking.show) .plank:before,
body:has(.booking.show) .plank:after, { /* prevent scrolling of the sawteeth while a scrollable booking form is displayed */
height: 100vh;
overflow-y: hidden;
pointer-events: none;
background-clip: clip;
}
body:has(.booking.show) > *:not(article.booking.show ) { /* prevent scrolling of the sawteeth on iOS while a scrollable booking form is displayed */
pointer-events: none;
background-clip: clip;
}
@media (prefers-color-scheme: dark) {
.plank:after {
visibility: visible;
}
.plank:before,
.plank:after {
background-image: url("/assets/img/buechner-hell.jpg"), url("/assets/img/buechner-hell-blur2.jpg"), url("/assets/img/buechner-hell-blur2.jpg");
} /* added 2025-02-18 */
article.content,
article.booking,
#cookie-banner > div {
width: 96.1%;
}
/*article.booking.show {
width: 90%;
} /* DEBUG 2025-02-18 why? */
#booking_details .modal .minimizer {
background-color: var(--accent-color);
display: none;
}
div.info a.btn.btn-default {
color: black;
}
div.info a.btn:hover {
border-color: var(--accent-color);
color: var(--font-color);
}
a.btn,
button {
background-color: #a3aaa5 /*#0d0d19;*/
}
h1,
h2 {
letter-spacing: 0.15em;
}
.booking label {
/*font-weight: 400;*/
/*font-weight: var(--font-weight);*/
}
.options label {
filter: brightness(1.5);
}
}
@media (hover: hover) {
section:not(:hover) .btn.hide-when-idle:not(.active) {
opacity: 0;
transition: opacity 3s 2s ease;
}
}
@media only screen and (min-width: 652px) {
/* smartphones in landscape (iPhone SE landscape = 653px) */
:root {
--font-size: 0.8rem;
--min-width: initial;
--max-width: initial;
}
article.content:before {
width: calc(99.7% * var(--sawblade-width));
}
article.booking.show {
width: 91%;
}
.hide_on_portrait_phones {
position: inherit;
left: auto;
}
.show_on_portrait_smartphones_only {
display: none !important;
}
.banner + p {
/* on portrait ipads and landscape phones, four buttons are displayed on one line */
justify-content: space-between;
/*flex-wrap: wrap;*/
padding-right: 3em;
}
/* #booking_details .state > span.prefix {
display: inline-block;
}
#booking_details .state:before {
content: 'Status:';
}*/
}
@media only screen and (min-width: 740px) {
/* Tablets in portrait (iPad mini 6 portrait 744*1090 */
:root {
--font-size: 1rem; /* weird sizing on iphoneX and newer in landscape */
--font-size: 1.55vw; /* let it grow respecting the four buttons on index.html */
/*--font-size: 70%;*/
--min-width: initial;
--max-width: initial;
--column-padding: 7vw;
--column-padding-inner-factor: 1.5;
--icon-menu:url("data:image/svg+xml;utf8,")
}
nav:before {
opacity: 1;
transform: scale(1.5);
transform-origin: top left;
}
.backend nav:before {
transition: margin-top 2s 2s ease;
margin-top: -2.4em;
}
.backend nav:hover:before {
transition: margin-top .5s ease-out;
margin-top: 0em;
}
h1 {
margin-top: 2em;
}
a.btn,
button {
/*width: 17%;*/
}
.plank:after {
visibility: visible;
}
article.content,
article.booking,
#cookie-banner > div {
width: calc(98% - (1.5 * var(--column-padding)) - (env(safe-area-inset-right) * 0.4));
margin-left: var(--column-padding);
padding: 0% calc( var(--column-padding) * var(--column-padding-inner-factor));
padding-right: var(--column-padding);
/*padding-right: 2em;*/
}
article.booking.show {
width: 86.3%;
}
/*background-color: var(--background-color);*/
article.content:before {
width: calc(99.9% * var(--sawblade-width));
width: calc(100% * var(--sawblade-width)); /* 2024-01-10 for iphone15 Pro */
margin-left: calc(var(--column-padding) * -1 * var(--column-padding-inner-factor) );
}
article.content:after {
/*margin-right: calc( var(--column-padding) * 1.5);*/
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor) );
background-size: 80%;
}
.cookie-banner a.btn,
#cookie_dump a.btn {
min-width: 13em;
}
.hide_on_smartphones {
display: inherit !important;
visibility: visible;
font-size: inherit !important; /* for smartphone specific rules in booking form */
}
.show_on_smartphones_only {
display: none !important;
}
.banner + p {
/* on landscape ipads and small desktop screens, the font size and with it, the button width increases,
for those, the buttons are left aligned again */
/* justify-content: initial;*/
flex-wrap: wrap;
}
}
@media only screen and (min-width: 1024px) {
/* tablets in landscape */
:root{
--font-size: 1rem; /* weird sizing on iphoneX and newer in landscape */
}
h1,
.collapsed > h1 {
margin-top: 4em;
}
a.btn,
button {
margin-right: 0.6em;
padding: 0.1em 1.1vw;
}
#cookie_dump pre {
font-size: 0.8em;
}
.banner + p {
/* on medium desktop screens, the buttons are justified on one line again */
justify-content: space-between;
flex-wrap: no-wrap;
}
}
@media only screen and (min-width: 1200px) {
:root {
--column-padding: 8vw;
--column-padding-inner-factor: 1.7;
--font-size: 1.1rem;
}
a.btn,
button {
/* prevent wrapping the buttons in homepage banner */
font-size: 1rem;
}
.show_on_desktop_only {
/* display: initial !important;*/
visibility: visible;
}
.hide_on_desktop_only {
/* display: none;*/
visibility: hidden;
}
article.content,
article.booking,
#cookie-banner > div {
padding: 0% calc( var(--column-padding) * var(--column-padding-inner-factor));
/*width: calc(70% - env(safe-area-inset-right)*0.4);*/
/*margin-left: 10%;*/
/*padding-right: 2em;*/
/*padding-left: 10%;*/
}
article.content:before {
width: calc(95.1% * var(--sawblade-width));
width: calc(100.6% * var(--sawblade-width));
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor));
/*margin-left: -10%;*/
}
article.content:after {
margin-left: calc( var(--column-padding) * -1 * var(--column-padding-inner-factor));
background-size: 66%;
}
.data-table .data-table-options {
margin-top: -2.5em;
right: 1.5em;
}
.data-table .data-table-options .options-expand {
display: none;
}
.data-table .data-table-options .btn.options {
position: absolute;
margin-top: 2.7em;
/* right: 0.3em;*/
}
.data-table .data-table-options .add-item,
.data-table .data-table-options .refresh,
.data-table .data-table-options .find-item,
.data-table .data-table-options .view-reset {
background-position: right center;
border-right: solid 0.3em transparent;
}
.data-table .data-table-options .add-item:before,
.data-table .data-table-options .refresh:before,
.data-table .data-table-options .find-item:before,
.data-table .data-table-options .view-reset:before {
display: inline-block;
transform: translateY(-0.1em);
padding-left: 0.5em;
padding-right: 1.75em;
}
/* .data-table .data-table-options .add-item:before {
content: "Neue Zeile\200a…";
}*/
/* .data-table .data-table-options .refresh:before {
content: "Neu Laden";
}
*/ .data-table .data-table-options .find-item:before {
content: "Suchen";
}
.data-table .data-table-options .view-reset:before {
content: "Ansicht zurücksetzen";
}
.data-table .data-table-options .show-deleted:before {
/* content: "Gelöschte";*/
}
}
@media only screen and (min-width: 1320px) {
a.btn,
button {
/* release prevention wrapping the buttons in homepage banner */
font-size: calc(var(--font-size) * 1);
}
}
@media only screen and (min-width: 1520px) {
a.btn,
button {
/* release prevention wrapping the buttons in homepage banner */
font-size: calc(var(--font-size) * 1.15);
}
}