@charset "utf-8";
@import url(/includes/fonts/sourcesanspro/all.css);
@import url(/includes/fonts/fontawesome/all.css);
@import url(/includes/css/general.css);

/* individueller Teil */

:root,
:host {
    --rcms-weiss:#fff;
    --rcms-dunkelblau:#005d7b;
    --rcms-blau:#40869c;
    --rcms-blautransparent:#bfdad988;
    --rcms-hellblau:#7faebd;
    --rcms-hellblauleicht:#bfdad9;
    --rcms-dunkelbraun:#51392d;

    --ol-background-color: white;
    --ol-accent-background-color: #F5F5F5;
    --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
    --ol-partial-background-color: rgba(255, 255, 255, 0.75);
    --ol-foreground-color: #333333;
    --ol-subtle-foreground-color: #666666;
    --ol-brand-color: #00AAFF;
}

*{font-family: 'Source Sans Pro';color: var(--rcms-dunkelblau);font-size:16px;line-height:21px;box-sizing:border-box}
body {background: var(--rcms-hellblauleicht);height:100%;margin-bottom:1px;overflow-y:scroll}
h1{font-size:18px;}
h2{font-size:14px;}
hr{border:0;height:1px;background: var(--rcms-dunkelblau);margin:10px 0;}
a{text-decoration:none;}
p{margin:0 0 20px}

button {cursor:pointer;}

header {position:static;top:0;left:0}
header .center {width:100%;max-width:1280px;margin:0 auto}
header .line1 {background: var(--rcms-dunkelblau);padding:5px}
header .line1 * {color: var(--rcms-weiss);font-size:24px;}
header .line1 .center {display:flex;justify-content:center;padding:5px 0}
header .line1 a {margin-left:40px;position:relative}
header .line1 .tel {font-weight:bold;font-size:34px;}
header .line1 .tel:before,
header .line1 .mail:before {font-family: "Font Awesome 5 Free";font-weight:bold;position:absolute;left:-30px;top:0;}
header .line1 .tel:before {content:'\f879';border:1px solid  var(--rcms-weiss);border-radius:50%;padding:2px;font-size:10px;line-height:14px;height:16px;width:16px;text-align:center}
header .line1 .mail:before {content:'\f0e0';font-weight:normal}
header .line2 {background: var(--rcms-weiss);border-bottom:2px solid  var(--rcms-dunkelbraun);}
header .line2 .center {display:grid;grid-template-columns:320px 1fr;width:100%;max-width:1280px;margin:0 auto;}
header .line2 .center * {align-self: end;}
header .line2 img {display:block;}
header .line2 nav {margin-bottom:10px;justify-self:end;}
header .line2 nav ul {list-style:none;display:flex;list-style:none}
header .line2 nav ul li {border-left:1px solid  var(--rcms-dunkelbraun)}
header .line2 nav ul li:nth-child(2) {border-left:none}
header .line2 nav ul li a {padding:5px;color: var(--rcms-dunkelbraun);font-size:30px;line-height:32px;font-weight:lighter;display:inline-block}
header .line2 nav ul li a:hover {padding:5px;color: var(--rcms-weiss);background: var(--rcms-dunkelbraun)}
header .line2 nav ul .home {border-left:none}
header .line2 nav ul .home a {font-family:"Font Awesome 5 Free";font-weight:bold;color: var(--rcms-weiss);background: var(--rcms-dunkelbraun)}
header .line2 nav:hover .home a {background: var(--rcms-weiss);color: var(--rcms-dunkelbraun)}
header .line2 nav ul li a:hover {color: var(--rcms-weiss);background-color: var(--rcms-dunkelbraun)}
header .line2 nav .burger {display:none;font-size:55px;line-height:1;padding-right:10px;cursor:pointer;font-weight: bold;}

.hauptbereich {width:100%;height:calc(100vw / 1920 * 760);aspect-ratio:1920 / 760;background-position:center center;background-size:cover;background-repeat:no-repeat;position:relative}
.hauptbereich .ueberschrift {margin:0 auto;max-width:1280px;border:40px solid #fff8;position:absolute;bottom:-110px;padding:25px;left:50%;transform: translate(-50%, 0);}
.hauptbereich .ueberschrift h1 {background: var(--rcms-dunkelblau);padding:35px;min-width:200px;color: var(--rcms-weiss);font-size:60px;line-height:70px;white-space: nowrap;}

.container {background: var(--rcms-hellblauleicht)}
.container .inhalt {width:100%;max-width:1280px;margin:0 auto;background: var(--rcms-weiss);padding-top:140px;padding-bottom:75px;display:grid;grid-gap:100px;overflow:hidden;}
.container .hotelinhalt {width:100%;max-width:1280px;margin:0 auto;background: var(--rcms-weiss);padding:140px 60px 75px;display:grid;grid-gap:0 60px;grid-template-columns:280px 1fr;overflow:hidden;}
.container .hotelinhalt .adresselogo {padding:25px;border:1px solid  var(--rcms-hellblau);text-align:center}
.container .hotelinhalt .adresselogo img {display:block;max-width:100%;height:auto !important;margin:0 auto}
.container .hotelinhalt .adresselogo .sterne {display:block;margin-top:20px}
.container .hotelinhalt .adresselogo .sterne span {font-family: "Font Awesome 5 Free";font-weight: normal}
.container .hotelinhalt .adresselogo .hoteltyp {display:block}
.container .hotelinhalt .adresselogo .adresse {display:block;margin-top:20px}
.container .hotelinhalt .text2 {padding:25px;border:1px solid  var(--rcms-hellblau);margin-top:60px}
.container .hotelinhalt .text2 h3 {padding-bottom:0;margin-bottom:0;font-size:24px;line-height:27px}
.container .hotelinhalt .text2 p {margin-bottom:60px}
.container .hotelinhalt .text2 p:last-child {margin-bottom:0}
.container .hotelinhalt .rechts .bildergal {border:40px solid  var(--rcms-hellblau);padding:100px 0 25px 25px;margin-right:-100px}
.container .hotelinhalt .rechts .bildergal div {display:flex;justify-content:space-between;margin-bottom:10px}
.container .hotelinhalt .rechts .bildergal div img {}
.container .hotelinhalt .rechts .bildergal button {background: var(--rcms-blau);text-align:center;color: var(--rcms-weiss);display:block;border:1px solid  var(--rcms-blau);width:100%;font-size:24px;padding:5px}

.container .hotelinhalt .rechts .text1 {padding:100px 0 100px 65px}
.container .hotelinhalt .rechts .text1 p {font-size:24px;line-height:1.1}
.container .hotelinhalt .rechts .preisblock {}
.container .hotelinhalt .rechts .preisblock h2 {font-size:48px;text-align:center;display:block;margin-bottom:0;line-height:1}
.container .hotelinhalt .rechts .preisblock h3 {font-size:36px;text-align:center;display:block;margin-bottom:30px;line-height:1}
.container .hotelinhalt .rechts .preisblock ul {max-width:100%;list-style:none;padding:20px;border:1px solid  var(--rcms-blau)}
.container .hotelinhalt .rechts .preisblock ul li {position:relative}
.container .hotelinhalt .rechts .preisblock ul li:before {width:100%;white-space:nowrap;content:"";color:#ccc;font-weight:bold;border-bottom:3px dotted  var(--rcms-blau);position:absolute;left:0;bottom:2px;}
.container .hotelinhalt .rechts .preisblock ul span {font-weight:bold}
.container .hotelinhalt .rechts .preisblock ul span:first-child {background:white;padding-right:0.2em;z-index:1;position:relative;}
.container .hotelinhalt .rechts .preisblock ul span + span {float:right;background:white;padding-left:0.2em;z-index: 1;position: relative;}
.nl_senden_in,
.nl_senden_out,
.container .hotelinhalt .rechts .openanfrage {margin-top:20px;background: var(--rcms-blau);text-align:center;color: var(--rcms-weiss);display:block;border:1px solid  var(--rcms-blau);width:100%;font-size:24px;padding:15px}

.container .hotelinhalt .anfrageformular {display:none;margin-top:60px;grid-column: 1 / span 2;border:1px solid  var(--rcms-hellblau);padding:15px;grid-template-columns: repeat(8, 1fr);grid-gap:15px;}
.container .hotelinhalt .anfrageformular .error {box-shadow: 0 0 3px #f00}
.container .hotelinhalt .anfrageok {display:none}
.container .hotelinhalt .einespalte {grid-column: auto / span 1}
.container .hotelinhalt .zweispalten {grid-column: auto / span 2}
.container .hotelinhalt .dreispalten {grid-column: auto / span 3}
.container .hotelinhalt .vierspalten {grid-column: auto / span 4}
.container .hotelinhalt .autozeilen {grid-row: auto / span 3}
.container .hotelinhalt .dsgvo {grid-column: auto / span 8;font-size:10px;line-height:13px;}
.container .hotelinhalt .dsgvo a {font-size:inherit;line-height:inherit}
.nl_email_in, nl_email_out,
.container .hotelinhalt input,
.container .hotelinhalt select {max-width:100%;width:100%;padding:5px}
.container .hotelinhalt textarea {width:100%;max-width:100%;min-width:100%;height:100%;max-height:100%;min-height:100%;resize:none}
.container .hotelinhalt .anfrageabsenden {margin-top:20px;background: var(--rcms-blau);text-align:center;color: var(--rcms-weiss);display:none;border:1px solid  var(--rcms-blau);width:100%;font-size:24px;padding:15px;}
.container .hotelinhalt .kartehotel {grid-column: 1 / span 2;padding-top:60px}
.container .hotelinhalt #map_canvas {width:100%;height:500px}
.container .hotelinhalt .mapdata {display:none}
.container .hotelinhalt .legende {margin-top:10px}
.container .hotelinhalt .legende ul {margin-left:0;list-style:none}
.container .hotelinhalt .legende ul li span:first-child {background: var(--rcms-dunkelblau);border-radius:50%;border:1px solid  var(--rcms-dunkelblau);padding:3px;color: var(--rcms-weiss);font-size:12px;line-height:1;width:18px;height:18px;text-align:center;display:inline-block;margin-right:5px;}

.ol-box {box-sizing: border-box;border-radius: 2px;border: 1.5px solid var(--ol-background-color);background-color: var(--ol-partial-background-color);}
.ol-mouse-position {top: 8px;right: 8px;position: absolute;}
.ol-scale-line {background: var(--ol-partial-background-color);border-radius: 4px;bottom: 8px;left: 8px;padding: 2px;position: absolute;}
.ol-scale-line-inner {border: 1px solid var(--ol-subtle-foreground-color);border-top: none;color: var(--ol-foreground-color);font-size: 10px;text-align: center;margin: 1px;will-change: contents, width;transition: all 0.25s;}
.ol-scale-bar {position: absolute;bottom: 8px;left: 8px;}
.ol-scale-bar-inner {display: flex;}
.ol-scale-step-marker {width: 1px;height: 15px;background-color: var(--ol-foreground-color);float: right;z-index: 10;}
.ol-scale-step-text {position: absolute;bottom: -5px;font-size: 10px;z-index: 11;color: var(--ol-foreground-color);text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);}
.ol-scale-text {position: absolute;font-size: 12px;text-align: center;bottom: 25px;color: var(--ol-foreground-color);text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);}
.ol-scale-singlebar {position: relative;height: 10px;z-index: 9;box-sizing: border-box;border: 1px solid var(--ol-foreground-color);}
.ol-scale-singlebar-even {background-color: var(--ol-subtle-foreground-color);}
.ol-scale-singlebar-odd {background-color: var(--ol-background-color);}
.ol-unsupported {display: none;}
.ol-viewport,
.ol-unselectable {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
.ol-viewport canvas {all: unset;overflow: hidden;}
.ol-viewport {touch-action: pan-x pan-y;}
.ol-selectable {-webkit-touch-callout: default;-webkit-user-select: text;-moz-user-select: text;user-select: text;}
.ol-grabbing {cursor: -webkit-grabbing;cursor: -moz-grabbing;cursor: grabbing;}
.ol-grab {cursor: move;cursor: -webkit-grab;cursor: -moz-grab;cursor: grab;}
.ol-control {position: absolute;background-color: var(--ol-subtle-background-color);border-radius: 4px;}
.ol-zoom {top: .5em;left: .5em;}
.ol-rotate {top: .5em;right: .5em;transition: opacity .25s linear, visibility 0s linear;}
.ol-rotate.ol-hidden {opacity: 0;visibility: hidden;transition: opacity .25s linear, visibility 0s linear .25s;}
.ol-zoom-extent {top: 4.643em;left: .5em;}
.ol-full-screen {right: .5em;top: .5em;}
.ol-control button {display: block;margin: 1px;padding: 0;color: var(--ol-subtle-foreground-color);font-weight: bold;text-decoration: none;font-size: inherit;text-align: center;height: 1.375em;width: 1.375em;line-height: .4em;background-color: var(--ol-background-color);border: none;border-radius: 2px;}
.ol-control button::-moz-focus-inner {border: none;padding: 0;}
.ol-zoom-extent button {line-height: 1.4em;}
.ol-compass {display: block;font-weight: normal;will-change: transform;}
.ol-touch .ol-control button {font-size: 1.5em;}
.ol-touch .ol-zoom-extent {top: 5.5em;}
.ol-control button:hover,
.ol-control button:focus {text-decoration: none;outline: 1px solid var(--ol-subtle-foreground-color);color: var(--ol-foreground-color);}
.ol-zoom .ol-zoom-in {border-radius: 2px 2px 0 0;}
.ol-zoom .ol-zoom-out {border-radius: 0 0 2px 2px;}
.ol-attribution {text-align: right;bottom: .5em;right: .5em;max-width: calc(100% - 1.3em);display: flex;flex-flow: row-reverse;align-items: center;}
.ol-attribution a {color: var(--ol-subtle-foreground-color);text-decoration: none;}
.ol-attribution ul {margin: 0;padding: 1px .5em;color: var(--ol-foreground-color);text-shadow: 0 0 2px var(--ol-background-color);font-size: 12px;}
.ol-attribution li {display: inline;list-style: none;}
.ol-attribution li:not(:last-child):after {content: " ";}
.ol-attribution img {max-height: 2em;max-width: inherit;vertical-align: middle;}
.ol-attribution button {flex-shrink: 0;}
.ol-attribution.ol-collapsed ul {display: none;}
.ol-attribution:not(.ol-collapsed) {background: var(--ol-partial-background-color);}
.ol-attribution.ol-uncollapsible {bottom: 0;right: 0;border-radius: 4px 0 0;}
.ol-attribution.ol-uncollapsible img {margin-top: -.2em;max-height: 1.6em;}
.ol-attribution.ol-uncollapsible button {display: none;}
.ol-zoomslider {top: 4.5em;left: .5em;height: 200px;}
.ol-zoomslider button {position: relative;height: 10px;}
.ol-touch .ol-zoomslider {top: 5.5em;}
.ol-overviewmap {left: 0.5em;bottom: 0.5em;}
.ol-overviewmap.ol-uncollapsible {bottom: 0;left: 0;border-radius: 0 4px 0 0;}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {display: block;}
.ol-overviewmap .ol-overviewmap-map {border: 1px solid var(--ol-subtle-foreground-color);height: 150px;width: 150px;}
.ol-overviewmap:not(.ol-collapsed) button {bottom: 0;left: 0;position: absolute;}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {display: none;}
.ol-overviewmap:not(.ol-collapsed) {background: var(--ol-subtle-background-color);}
.ol-overviewmap-box {border: 1.5px dotted var(--ol-subtle-foreground-color);}
.ol-overviewmap .ol-overviewmap-box:hover {cursor: move;}

.container .inhalt.bildlinks {grid-template-columns:1fr 2fr;}
.container .inhalt.bildlinks .links {margin-left:-40px;}
.container .inhalt.bildlinks .links div {border:40px solid  var(--rcms-hellblauleicht);padding:100px 25px 25px 0;}
.container .inhalt.bildlinks .links div p:last-child{margin-bottom:0}
.container .inhalt.bildlinks .links div p {display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:10px}
.container .inhalt.bildlinks .links div p img {display:block;grid-column:1 / span 3;max-width:100%;height:auto !important;}
.container .inhalt.bildlinks .links div p img.drittel {grid-column:auto;}
.container .inhalt.bildlinks .rechts {padding-right:80px}
.container .inhalt.bildlinks .rechts h2 {font-size:60px;line-height:70px;height:140px;margin-bottom:0}
.container .inhalt.bildlinks .rechts h3 {font-size:30px;line-height:35px;margin:20px 0}
.container .inhalt.bildlinks .rechts ul {margin-left:0}
.container .inhalt.bildlinks .rechts ul li {position:relative;margin-left:21px;margin-bottom:3px}
.container .inhalt.bildlinks .rechts ul li:before {content:'\f164';position:absolute;left:-21px;font-family:"Font Awesome 5 Free";font-weight:normal}
.container .inhalt.bildlinks .rechts a:last-child {border-bottom:1px solid  var(--rcms-dunkelblau);font-weight:bold;}

.container .inhalt.bildrechts {grid-template-columns:2fr 1fr;}
.container .inhalt.bildrechts .rechts {margin-right:-40px;}
.container .inhalt.bildrechts .rechts div {border:40px solid  var(--rcms-hellblauleicht);padding:100px 0 25px 25px;}
.container .inhalt.bildrechts .rechts div p:last-child{margin-bottom:0}
.container .inhalt.bildrechts .rechts div p {display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:10px}
.container .inhalt.bildrechts .rechts div p img {display:block;grid-column:1 / span 3;max-width:100%;height:auto !important;}
.container .inhalt.bildrechts .rechts div p img.drittel {grid-column:auto;}
.container .inhalt.bildrechts .links {padding-left:80px}
.container .inhalt.bildrechts .links h2 {font-size:60px;line-height:70px;height:140px;margin-bottom:0}
.container .inhalt.bildrechts .links h3 {font-size:30px;line-height:35px;margin:20px 0}
.container .inhalt.bildrechts .links ul {margin-left:0}
.container .inhalt.bildrechts .links ul li {position:relative;margin-left:21px;margin-bottom:3px}
.container .inhalt.bildrechts .links ul li:before {content:'\f164';position:absolute;left:-21px;font-family:"Font Awesome 5 Free";font-weight:normal}
.container .inhalt.bildrechts .links a:last-child {border-bottom:1px solid  var(--rcms-dunkelblau);font-weight:bold;}

.container .trennertop {background: var(--rcms-dunkelblau);max-width:1280px;width:100%;margin:0 auto;padding:50px 0}
.container .trennertop .center {max-width:60%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-gap:25px}
.container .trennertop .center div {display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;}
.container .trennertop .center div span:first-child {width:120px;height:120px;text-align:center;padding:30px;font-size:60px;line-height:60px;background: var(--rcms-weiss);border:1px solid  var(--rcms-weiss);border-radius:50%;font-family:"Font Awesome 5 Free";font-weight:bold;color: var(--rcms-dunkelblau);background-image:radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 60%, rgb(0, 0, 0) 80%, rgb(0, 0, 0) 100%);}
.container .trennertop .center div span:last-child {color: var(--rcms-weiss);padding-top:40px;}

.container .hotellistebilder {max-width:1280px;width:100%;margin:0 auto;background-color: var(--rcms-weiss);padding-top:120px;padding-bottom:120px;overflow:hidden}
.container .hotellistebilder h2 {font-size:48px;margin-bottom:0;line-height:54px;text-align:center}
.container .hotellistebilder h3 {font-size:36px;margin-bottom:50px;line-height:40px;text-align:center}
.container .hotellistebilder .liste {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:30px;margin:120px 80px}
.container .hotellistebilder .liste a {position:relative;width:100%}
.container .hotellistebilder .liste a img {width:100%;}
.container .hotellistebilder .liste a:last-child {justify-self:end;align-self:end;grid-column:4;text-decoration:underline;font-weight:bold}
.container .hotellistebilder .liste a .titel {display:none;padding:10px;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(33,33,33,0.7);color: var(--rcms-weiss);justify-content:center;align-content:center;flex-direction:column}
.container .hotellistebilder .liste a .titel span {color: var(--rcms-weiss);text-align: center;}
.container .hotellistebilder .liste a:hover .titel {display:flex}

.container .thermalgebiet {max-width:1280px;width:100%;margin:0 auto;background-color: var(--rcms-weiss);}
.container .thermalgebiet .trenner {background: var(--rcms-dunkelblau);display:grid;grid-template-columns:1fr 1fr;grid-gap:20px 80px;padding:20px 200px}
.container .thermalgebiet .trenner h2 {grid-column:1 / span 2;color: var(--rcms-weiss);font-size:48px;margin-bottom:0;line-height:54px;text-align:center}
.container .thermalgebiet .trenner div {display:grid;grid-template-columns:1fr 2fr;grid-gap:10px;}
.container .thermalgebiet .trenner div span:first-child {width:175px;height:175px;text-align:center;padding:30px;font-size:60px;line-height:60px;background: var(--rcms-weiss);border:1px solid  var(--rcms-weiss);border-radius:50%;font-family:"Font Awesome 5 Free";font-weight:bold;color: var(--rcms-dunkelblau);background-image:radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 60%, rgb(0, 0, 0) 80%, rgb(0, 0, 0) 100%);}
.container .thermalgebiet .trenner div span:last-child {color: var(--rcms-weiss);font-size:36px;line-height:40px;font-weight:normal;padding-top:45px}
.container .thermalgebiet .text {padding:80px;columns:2;column-gap:80px}
.container .thermalgebiet .text a:last-child {border-bottom:1px solid  var(--rcms-dunkelblau);font-weight:bold;}

.container .suchelinks {grid-template-columns:1fr 2fr;grid-gap:0 60px}
.container .suchelinks .uberschrift {grid-column:1 / span 2;text-align:center}
.container .suchelinks .uberschrift h2 {font-size:60px;line-height:70px;margin-bottom:0}
.container .suchelinks .uberschrift h3 {font-size:30px;line-height:35px;margin:20px 0}
.container .suchelinks .links {padding-left:60px}
.container .suchelinks .links .filter {border:1px solid  var(--rcms-dunkelblau);padding:15px;}
.container .suchelinks .links .filter b {margin-top:25px;display:block;font-size:20px;line-height:1;margin-bottom:5px}
.container .suchelinks .links .filter b:first-child {margin-top:0;}
.container .suchelinks .links .filter .sterne {font-family: "Font Awesome 5 Free";}
.container .suchelinks .links .filter button {background:none;border:none;text-decoration:underline;display:block;margin-top:25px}
.container .suchelinks .hotellistefilter {display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;margin-right:60px}
.container .suchelinks .hotellistefilter a {grid-template-rows:1fr 1fr;background:var(--rcms-weiss)}
.container .suchelinks .hotellistefilter a:hover {box-shadow: 0 0 5px #333}
.container .suchelinks .hotellistefilter a img {max-width:100%;height: auto !important;}
.container .suchelinks .hotellistefilter a .infos {margin-top:-50px;border:10px solid var(--rcms-blautransparent);z-index: 1;position:relative;padding:10px;display:block}
.container .suchelinks .hotellistefilter a .infos .titel {display:block;background:var(--rcms-dunkelblau);color:var(--rcms-weiss);text-align:center;font-weight:bold;padding:10px}
.container .suchelinks .hotellistefilter a .infos .hoteltyp {display:block;margin-top:5px}
.container .suchelinks .hotellistefilter a .infos .hotelort {display:block}
.container .suchelinks .hotellistefilter a .infos .hotelkategorie {display:block;margin-top:10px}
.container .suchelinks .hotellistefilter a .infos .hotelkategorie span {font-family:"Font Awesome 5 Free"}
.container .hotellistefilter .kartehotels {grid-column:1 / span 2;height:100%;display:none}
.container .hotellistefilter canvas {}
.container .hotellistefilter #map_canvas {width:100%;height:500px}
#smalloverlay {position:fixed;z-index:999;background:var(--rcms-weiss);padding:10px;}
#smalloverlay a {background:var(--rcms-dunkelblau);color:var(--rcms-weiss);padding:10px 15px;text-decoration:none;margin:0;border:1px solid #555;display:block}
#smalloverlay .closer {width:35px;height:35px;position:absolute;right:-23px;top:-23px;cursor:pointer;background:url('/admin/includes/img/close.png') no-repeat;}

.normaltable {width:100%;margin-top:30px;border-collapse:collapse}
.normaltable th,
.normaltable td {border:1px solid  var(--rcms-dunkelblau);padding:3px;hyphens: auto;font-size:12px}
.normaltable th {background: var(--rcms-dunkelblau);color: var(--rcms-weiss)}
.normaltable caption {font-weight:bold;font-size:150%;}
.nltxt {border:none;padding-left:0;font-size:12px;line-height:15px;display:block;}
.allInOneKontakt {}
.allInOneKontakt h3{font-size:18px;line-height:24px;border-bottom:1px solid  var(--rcms-dunkelblau);font-weight:300;margin:30px 0 10px}
.allInOneKontakt .bereiche ul {list-style:none;}
.allInOneKontakt .bereiche ul li {float:left;width:33%;display:block}
.allInOneKontakt select,
.allInOneKontakt textarea,
.normal_form input[type="email"],
.allInOneKontakt input[type="date"],
.allInOneKontakt input[type="time"],
.allInOneKontakt input[type="text"],
.allInOneKontakt input[type="tel"],
.allInOneKontakt input[type="email"]{width:46%;margin-right:20px;position:relative;border:1px solid #ccc;height:35px;padding:5px;line-height:25px;font-size:18px;margin-top:5px;box-sizing:border-box}
.allInOneKontakt input[type="checkbox"]{margin-right:20px;}
.allInOneKontakt input[name="grund_plz"] {width:calc(14% - 4px);margin-right:0}
.allInOneKontakt input[name="grund_ort"] {width:32%}
.allInOneKontakt select {border-color:#999}
.allInOneKontakt label {display:inline;font-weight:300;font-size:14px}
.booking_btn,
.allInOneKontakt button {margin:0 auto;display:block;margin:0 0 100px;padding:0;width:100%;text-align:center;background: var(--rcms-dunkelblau);border:none;line-height:35px;height:50px;box-shadow:0 0 5px #666;color: var(--rcms-weiss);font-size:21px;cursor:pointer;border-radius:5px}
.allInOneKontakt .zusatzfelder {margin-bottom:40px}
.allInOneKontakt textarea {height:100px;resize: vertical;min-height:100px}
.allInOneKontakt input.date {width:calc(31% - 4px);margin-right:0}
.allInOneKontakt input[type="time"] {width:15%;}
.booking_btn {margin-top:20px}

validationhelp {position:absolute;margin-left:-40px;font-weight: bold;font-size: 25px;margin-top:13px}
.allInOneKontakt select.valide + validationhelp,
select + validationhelp {margin-left:-65px}

input[name="grund_plz"] + validationhelp {margin-left:-20px}
input[type="checkbox"] + validationhelp {margin-left:-20px !important;margin-top:0}
input[type="checkbox"] {margin-right: 20px;}

.allInOneKontakt .optional + validationhelp:before{content:'*'}
.allInOneKontakt .selectone + validationhelp:before{content:'?'}
.allInOneKontakt .pflicht + validationhelp:before{content:'!';color: #f00;}
.allInOneKontakt .valide + validationhelp{margin-left:-44px}
.allInOneKontakt .valide + validationhelp:before{content:'✓';color: #060;}
.allInOneKontakt input[type="checkbox"].error + label {color:#f00}
.allInOneKontakt input:invalid {box-shadow:none}
.allInOneKontakt .datenschutzklausel {width: 43%;display: inline-block;font-size: 12px;line-height: 14px;}
.allInOneKontakt .datenschutzklausel label {font-size:inherit;line-height: inherit;}
.allInOneKontakt .katalogliste {text-align: center}
.allInOneKontakt .katalogliste .katalog {position:relative;text-decoration:none;display: inline-block;}
.allInOneKontakt .katalogliste .katalog img {transform: rotate(0);box-shadow: -5px 10px 10px #444;transition: transform 0.5s}
.allInOneKontakt .katalogliste .katalog:hover img {transform:rotate(-5deg);}
.allInOneKontakt .katalogliste .katalog span {display: block;margin-top: 20px;max-width: 200px;text-align: center;margin-left:35px;position:relative;white-space: nowrap}
.allInOneKontakt .katalogliste .katalog span:before {content:'t';font-family:'ZD';text-decoration:underline;font-size:25px;position:absolute;left: -25px;line-height: 40px;top:10px;color: var(--rcms-dunkelblau)}


footer {background: var(--rcms-dunkelbraun);padding:55px 0}
footer .center {display:grid;grid-template-columns:210px 1fr 260px;grid-gap:100px;width:100%;max-width:1280px;margin:0 auto}
footer * {color: var(--rcms-weiss);font-size:14px;line-height:17px}
footer b {margin-bottom:12px;display:block;font-size:16px;line-height:19px}
footer a[href^="tel:"] {margin-left:15px;position:relative;width:12px;height:12px}
footer a[href^="tel:"]:before {content:'\f879';font-family: "Font Awesome 5 Free";font-weight:bold;border:1px solid  var(--rcms-weiss);border-radius:50%;padding:2px;font-size:8px;line-height:8px;position:absolute;left:-15px;top:2px}
footer ul {list-style:none;}
footer ul li {position:relative;margin-left:21px;margin-bottom:3px}
footer ul li:before {content:'\f164';position:absolute;left:-21px;font-family:"Font Awesome 5 Free";font-weight:normal}
footer .line2 * {font-size:16px;line-height:20px;}
footer .line3 * {font-size:12px;line-height:15px;}

.zusatzinfo {position:absolute;top:20px;right:20px;background:var(--rcms-dunkelblau);padding:20px;width:100%;max-width:400px;box-shadow:5px 5px 10px #000;}
.zusatzinfo * {color:#fff}
.zusatzinfo .box {display:block}
.zusatzinfo .headline {display:block;font-weight:bold;font-size:150%;margin-bottom:10px;text-align:center}
.zusatzinfo img {width:100% !important;height:auto !important;display:block;}
.zusatzinfo .text {display:block;padding:10px;background:var(--rcms-weiss)}
.zusatzinfo .text * {color:var(--rcms-dunkelblau)}
.zusatzinfo a {text-decoration:underline;display:block;text-align:right}

@media (max-width:1140px) and (min-width: 581px) {

}

@media (max-width:1000px) and (min-width: 581px) {
    body .container .hotellistebilder .liste {grid-template-columns:1fr 1fr 1fr !important;}
    body .container .hotellistebilder .liste a:last-child {grid-column:3}
    body footer .center {grid-template-columns:1fr 2fr;padding:10px;grid-gap:20px;}
    body footer .center .line3 {grid-column: auto / span 2;}
    body .container .hotelinhalt {padding: 140px 10px 75px;grid-template-columns:2fr 3fr;grid-gap:20px}
    body .container .hotelinhalt .rechts .bildergal {border:none;padding:0;margin:0;}
    body .container .hotelinhalt .rechts .bildergal a {display:none}
    body .container .hotelinhalt .rechts .bildergal .zeile1 a:first-child {display:block;width:100%}
    body .container .hotelinhalt .rechts .bildergal .zeile1 a:first-child img {width:100% !important;height:auto !important;}
    body .container .hotelinhalt .rechts .text1 {padding:20px 0 0}
    body .container .hotelinhalt .rechts .text1 p {font-size:18px;line-height:21px}
    body .container .hotelinhalt .anfrageformular {grid-template-columns:repeat(4, 1fr)}
    body .container .hotelinhalt .anfrageformular .dsgvo,
    body .container .hotelinhalt .anfrageformular.teil2 .valueblock {grid-column: 1 / span 4 !important;}
    body .container .suchelinks .links {padding: 10px;}
    body .container .suchelinks,
    body .container .inhalt.bildrechts,
    body .container .inhalt.bildlinks {grid-template-columns:2fr 3fr}
    body .container .inhalt.bildrechts .links,
    body .container .inhalt.bildlinks .rechts {padding:10px;grid-row:auto}
    body .container .inhalt.bildrechts .rechts,
    body .container .inhalt.bildlinks .links {grid-row:auto}
    body .container .thermalgebiet .text {padding:10px}
    body .container .thermalgebiet .trenner {padding:20px 10px;grid-template-columns:1fr}
    body .container .trennertop .center {grid-template-columns:1fr}
    body header .line1 .center span {display:none}
    body header .line1 .center .mail {display:none}
    body header .line2 nav .burger {display:block}
    body header .line2 nav #navi {display:none;position:absolute;z-index:1;background:#fff;left:0;width:100%;}
    body header .line2 nav #navi a {display:block;text-align:center}
    body header .line2 nav #navi.openburger {display:block}
    body .hauptbereich {padding-top:calc(100vw / 1920 * 760)}
    body .hauptbereich .ueberschrift {position: initial;bottom: initial;left: initial;transform: translate(0,0);padding: 0;border:none;}
    body .hauptbereich .ueberschrift h1 {font-size:30px;line-height:36px;white-space:pre-wrap;text-align:center}
    body .container .inhalt.bildlinks .rechts h2 {font-size:26px;line-height:32px;white-space:pre-wrap;height:auto;}
    body .container .inhalt.bildlinks .rechts h3 {font-size:24px;line-height:28px;white-space:pre-wrap;height:auto;}
    body .container .suchelinks .hotellistefilter {padding:10px;grid-template-columns:1fr;margin:0;}
    body .container .suchelinks .hotellistefilter a img {width: 100%;}
    body validationhelp {margin-left:-20px}
    body select + validationhelp {margin-left:-40px}
    body .allInOneKontakt .bereiche ul li {float:none;width:95%}
    body .allInOneKontakt select,
    body .allInOneKontakt textarea,
    body .allInOneKontakt .datenschutzklausel,
    body .allInOneKontakt input[type="text"],
    body .allInOneKontakt input[type="email"],
    body .allInOneKontakt input[type="tel"]{width:100%;margin-right:0}
    body .allInOneKontakt .datenschutzklausel {display:block;margin-top:20px}
    body .allInOneKontakt button {width:100%}
    body .grunddaten {display:flex;flex-direction: column;}

    body .zusatzinfo {max-width:75%}
    body .zusatzinfo .box {display:grid;grid-template-columns:1fr 1fr}
    body .zusatzinfo .box .headline {grid-column: auto / span 2}
    body .zusatzinfo .box a {grid-column: auto / span 2}
}

@media (max-width:580px) {
    body .zusatzinfo {display:none}
    body .container .hotellistebilder .liste {grid-template-columns:1fr !important;}
    body .container .hotellistebilder .liste a:last-child {grid-column:1}
    body footer .center {grid-template-columns:1fr;padding:10px;grid-gap:20px;}
    body .container .suchelinks .links {padding: 10px;}
    body .container .hotelinhalt,
    body .container .suchelinks,
    body .container .inhalt.bildrechts,
    body .container .inhalt.bildlinks {grid-template-columns:1fr}
    body .container .inhalt.bildrechts .links,
    body .container .inhalt.bildlinks .rechts {padding:10px;grid-row:1}
    body .container .inhalt.bildrechts .rechts,
    body .container .inhalt.bildlinks .links {grid-row:2}
    body .container .thermalgebiet .text {columns:1;padding:10px}
    body .container .thermalgebiet .trenner {padding:20px 10px;grid-template-columns:1fr}
    body .container .hotelinhalt .kartehotel,
    body .container .hotelinhalt .anfrageformular,
    body .container .hotellistefilter .kartehotels,
    body .container .suchelinks .uberschrift,
    body .container .thermalgebiet .trenner h2 {grid-column:1}
    body .container .trennertop .center {grid-template-columns:1fr}
    body header .line1 .center span {display:none}
    body header .line1 .center .mail {display:none}
    body header .line2 nav .burger {display:block}
    body header .line2 nav #navi {display:none;position:absolute;z-index:1;background:#fff;left:0;width:100%;}
    body header .line2 nav #navi a {display:block;text-align:center}
    body header .line2 nav #navi.openburger {display:block}
    body .hauptbereich {padding-top:calc(100vw / 1920 * 760)}
    body .hauptbereich .ueberschrift {position: initial;bottom: initial;left: initial;transform: translate(0,0);padding: 0;border:none;}
    body .hauptbereich .ueberschrift h1 {font-size:30px;line-height:36px;white-space:pre-wrap;text-align:center}
    body .container .inhalt.bildlinks .rechts h2 {font-size:26px;line-height:32px;white-space:pre-wrap;height:auto;}
    body .container .inhalt.bildlinks .rechts h3 {font-size:24px;line-height:28px;white-space:pre-wrap;height:auto;}
    body .container .suchelinks .hotellistefilter {padding:10px;grid-template-columns:1fr;margin:0;}
    body .container .suchelinks .hotellistefilter a img {width: 100%;}
    body validationhelp {margin-left:-20px}
    body select + validationhelp {margin-left:-40px}
    body .allInOneKontakt .bereiche ul li {float:none;width:95%}
    body .allInOneKontakt select,
    body .allInOneKontakt textarea,
    body .allInOneKontakt .datenschutzklausel,
    body .allInOneKontakt input[type="text"],
    body .allInOneKontakt input[type="email"],
    body .allInOneKontakt input[type="tel"]{width:100%;margin-right:0}
    body .allInOneKontakt .datenschutzklausel {display:block;margin-top:20px}
    body .allInOneKontakt button {width:100%}
    body .grunddaten {display:flex;flex-direction: column;}
    body .container .hotelinhalt {padding: 140px 10px 75px;}
    body .container .hotelinhalt .rechts .bildergal {border:none;padding:0;margin:20px 0 0;}
    body .container .hotelinhalt .rechts .bildergal a {display:none}
    body .container .hotelinhalt .rechts .bildergal .zeile1 a:first-child {display:block;width:100%}
    body .container .hotelinhalt .rechts .bildergal .zeile1 a:first-child img {width:100% !important;height:auto !important;}
    body .container .hotelinhalt .rechts .text1 {padding:20px 0 0}
    body .container .hotelinhalt .rechts .text1 p {font-size:18px;line-height:21px}
    body .container .hotelinhalt .anfrageformular {grid-template-columns:repeat(4, 1fr)}
    body .container .hotelinhalt .anfrageformular .dsgvo,
    body .container .hotelinhalt .anfrageformular.teil2 .valueblock {grid-column: 1 / span 4 !important;}
}