@font-face {font-family: Amatic; font-style: regular; font-weight: 400; src:url("fonts/AmaticSC-Bold.ttf") format("truetype");}
@font-face {font-family: RobotoCondensed; font-style: bold; font-weight: 900; src:url("fonts/RobotoCondensed-Bold.ttf") format("truetype");}
@font-face {font-family: RobotoCondensed; font-style: regular; font-weight: 700; src:url("fonts/RobotoCondensed-Regular.ttf") format("truetype");}
@font-face {font-family: RobotoCondensed; font-style: light; font-weight: 400; src:url("fonts/RobotoCondensed-Light.ttf") format("truetype");}
@font-face {font-family: Chewy; font-style: cursive;}
@font-face {font-family: Coiny; font-style: cursive;}

/* RESET BROWSERSTYLE */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,hr,blockquote,main,article,aside {padding: 0; margin: 0;}

/* GLOBAL */
h1, h2, h3 {font-family: Amatic, Coiny, Chewy, sans-serif; color: #214a24; /* Kräftiges Wald- & Moosgrün */ font-size: 36px; line-height: 1.2em; font-weight: 400; padding: 0 0 6px 0; margin: 24px 0 10px 0;}
h4 {font-family: Amatic, sans-serif; color: #5c473c; /* Tieferes, kontrastreiches Erdbraun */ font-size: 32px; line-height: 1.2em; font-weight: 400; margin: 24px 0 10px 0;}
h5 {font-family: Coiny, Chewy, sans-serif; color: #b85c75; /* Ausdrucksstarkes, gut lesbares Altrosa */ font-size: 30px; line-height: 1.2em; font-weight: 400; margin: 24px 0 10px 0;}
h6 {font-family: Amatic, RobotoCondensed, sans-serif; color: #5c473c; font-size: 28px; line-height: 1.2em; font-weight: 400; margin: 24px 0 10px 0;}
p {margin: 10px 0;}
ol {margin: 6px 0;}
ol li {line-height: 1.4em; border: 0; padding: 3px 0; margin: 2px 0 2px 22px;}
ul {list-style-image: url(images/inhlist.gif); margin: 6px 0;}
ul li {line-height: 1.4em; border: 0; padding: 3px 0; margin: 2px 0 2px 17px;}
hr {height: 1px; clear: both; color: #c4b9a3; /* Subtiler, erdiger Naturton */ background-color: #c4b9a3; border: 0; margin: 16px 0;}
blockquote {background: #f1ebd9; /* Etwas satteres, warmes Natur-Creme */ font-style: italic; padding: 1px 0 1px 20px; border-left: 3px solid #b85c75; /* Kontrastreiche Altrosa Linie */}
submenu {font-family: Coiny, Chewy, sans-serif; background: #214a24; color: #fff; font-size: 20px; font-weight: 400; border-radius: 3px; padding: 4px 12px 6px 12px; margin: 6px 0;}
submenu2 {font-family: Coiny, Chewy, sans-serif; background: #214a24; color: #fff; font-size: 16px; }

/* ##############################
 CONTENT CLASSES 
##############################
*/

img {box-sizing: border-box; max-width: 100%;}
img.tplge_left_border {float: left; max-width: 48%; border: 5px solid #c4b9a3; margin: 0 20px 10px 0;}
img.tplge_left_noborder {float: left; max-width: 48%; border: 0; margin: 0 20px 10px 0;}
img.tplge_right_border {float: right; max-width: 48%; border: 5px solid #c4b9a3; margin: 0 0 10px 20px;}
img.tplge_right_noborder {float: right; max-width: 48%; border: 0; margin: 0 0 10px 20px;}
img.tplge_border {border: 5px solid #c4b9a3;}
img.tplge_noborder {border: 0;}
img.tplge_centered {display: block; margin: 24px auto;}

.tplge_code {clear: both; background: #fdfbf7; color: #2f2530; font-family: 'courier new', monospace; font-size: 15px; border: 1px solid #c4b9a3; padding: 10px 16px; overflow: scroll;}
.tplge_box01 {clear: both; background: #eedfc7; /* Stabilerer Creme-Karton-Look für besseren Kontrast */ border: 4px double #b19d85; padding: 12px 16px; margin: 16px 0;}
.tplge_legal {padding: 6px 0;}

.tplge_clearLeft {clear: left;}
.tplge_clearRight {clear: right;}
.tplge_clearBoth {clear: both;}

/* ##############################
 BODY
##############################
*/

/* BODY UND SEITE / BODY AND PAGE */
body {background: #f7f4ea; /* Soft Cream */ font-size: 17px; color: #2f2530; /* Dunkles Lavendelgrau für hervorragende Lesbarkeit */ font-family: RobotoCondensed, arial, sans-serif; line-height: 1.4em;}
#body {background: #fcfaf2; /* Helles Elfenbein */ min-width: 720px; font-size: 17px; color: #2f2530; text-align: left;}

/* M A I N (CONTENTS) */

.tplge_main {background: #fcfaf2;}
.tplge_mainIn {width: 1200px; padding: 0 0 36px 0; margin: 0 auto;}

/* CONTENT */

.tplge_content {box-sizing: border-box; width: 900px; float: right;}

/* languagemenu */
.tplge_langmenu {min-height: 12px; float: right; padding: 16px 25px 0 25px;} 
.tplge_langmenu img {float: right; padding: 0 0 0 24px;} 

.tplge_content img.tplge_logo {display: none; box-sizing: border-box; border: 0px solid #969690; border-radius: 7px; margin: 0 0 16px 9px;}
header h1 {font-size: 48px; padding: 0 25px; margin: 0;}

/* locator */
.tplge_locator {font-size: 16px; text-align: left; padding: 6px 25px 0 25px;}
.tplge_locator span.locator_text {font-weight: 700; padding: 0 6px 0 0;}

.tplge_article {box-sizing: border-box; width: 100%; float: left; padding: 0 25px;}

/* sidebarInfo and newsboxes */
.tplge_sidebarInfo {box-sizing: border-box; width: 300px; float: left;}
.tplge_newsboxInfo {box-sizing: border-box; width: 300px; float: left; padding: 6px 25px;}

/* mailform */
#tplge_content input.text {background: #fcfaf2; border: 1px solid #b19d85;}
#tplge_content textarea {width: 98%; background: #fcfaf2; border: 1px solid #b19d85;}
#tplge_content input.submit, #tplge_content input#submit {background: #214a24; color: #fff; font-size: 15px; line-height: 20px; border: 1px solid #163318; border-radius: 3px; padding: 2px 6px; margin: 0 6px 0 0;}

/* prev-top-next */
.tplge_prevtopnext {clear: both; text-align: center; padding: 12px 0 2px 0; margin: 0;}
.tplge_prevtopnext span {padding: 0 12px;}
.tplge_prevtopnext img {background: #eedfc7; padding: 9px; border: 0px solid #c0c6c9; border-radius: 8px;}
.tplge_prevtopnext img:hover {background: #dfcfb4;}

/* sitemap */
.sitemaplevel1 {font-size: 16px; font-weight: 700;}
.sitemaplevel2 {font-size: 15px; font-weight: 100;}

/* SIDEBAR NAV */

.tplge_sidebarNav {box-sizing: border-box; width: 300px; float: left; padding: 10px 25px 0 25px;} 
.tplge_sidebarNav img.tplge_logo {display: block; box-sizing: border-box; border: 0px solid #969690; border-radius: 7px; margin: 0 0 16px 9px;}

/* searchbox */
.tplge_searchboxContainer {width: 246px; background: #fff url('images/lupe1.jpg') right top no-repeat; border: 2px solid #b19d85; border-radius: 17px; color: #2f2530; padding: 0; margin: 0; overflow: hidden;}
#searchbox {text-align: left; padding: 0; margin: 0;}
#searchbox input.submit {background: none; color: transparent; font-family: courier new; font-size: 24px; line-height: 24px; font-weight: 700; border: 0px solid #999; padding: 3px 0 0 0; margin: 0;}
#searchbox input.submit:hover {cursor: pointer;}
#searchbox input.text {width: 184px; background: #fdfbf7; float: left; font-size: 14px; border: 0; border-right: 1px solid #b19d85; border-radius: 15px 0 0 15px; padding: 6px 12px; margin: 0;}

/* nav / toc */
nav {}

nav ul.menulevel1 {list-style: none; padding-top: 3px;}
nav ul.menulevel2 {list-style: none; padding-bottom: 4px;}
nav ul.menulevel3 {list-style: none;}
nav ul.menulevel4 {list-style: none;}
nav ul.menulevel5 {list-style: none;}
nav ul.menulevel6 {list-style: none;}

ul.menulevel1 li {font-family: Coiny, Chewy, sans-serif; background: #214a24; color: #fcfaf2; font-size: 20px; font-weight: 400; border-radius: 3px; padding: 4px 12px 6px 12px; margin: 6px 0;}
ul.menulevel2 li {font-family: RobotoCondensed, arial, sans-serif; font-size: 17px; font-weight: 700; padding: 8px 0 0 16px;} 
ul.menulevel3 li {font-family: RobotoCondensed, arial, sans-serif; font-size: 17px; font-weight: 400; padding: 8px 0 0 16px;} 

/* icons div */
.tplge_icons {text-align: center; padding: 12px 12px 0 12px;}
#tplge_icons img {border: 0; margin: 0 0px 0 0px;}

/* newsbox */
.tplge_newsbox {}
.tplge_newsbox h4,.tplge_newsboxInfo h4 {font-size: 28px;}
.tplge_newsbox h5,.tplge_newsboxInfo h5 {font-size: 26px;}
.tplge_newsbox h6,.tplge_newsboxInfo h6 {font-size: 24px;}

/* F O O T E R */

.tplge_footer {clear: both; background-color: #214a24; color: #fff; font-size: 15px; text-align: right; border-top: 0px solid #eee; padding: 16px 24px 24px 24px; margin: 0;}

/* L I N K S */

a:link {color: #b85c75; /* Ausdrucksstarkes Altrosa */ text-decoration: none;}
a:visited {color: #b85c75; text-decoration: none;}
a:hover {color: #214a24; /* Wechselt zu tiefem Waldgrün beim Drüberfahren */ text-decoration: none;}
a:active {color: #214a24; text-decoration: none;}
a:focus {color: #214a24; text-decoration: none;}

nav a:link {color: #eedfc7; text-decoration: none;}
nav a:visited {color: #eedfc7; text-decoration: none;}
nav a:hover {color: #b85c75; text-decoration: none;}
nav a:active {color: #b85c75; text-decoration: none;}
nav a:focus {color: #b85c75; text-decoration: none;}

article a:link {color: #b85c75; text-decoration: underline; background-color: transparent;}
article a:visited {color: #b85c75; text-decoration: underline;}


/* ############################################################
   AB HIER: BUCHUNGS-WIDGET STYLES & AUTOMATISCHE PREISBERCHNUNG
   ############################################################ */

.camping-booking-widget {
    background: #eedfc7; 
    border: 4px double #b19d85;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: 20px auto;
    font-family: RobotoCondensed, arial, sans-serif;
    box-sizing: border-box;
}

.camping-booking-widget h3 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid #c4b9a3;
    padding-bottom: 8px;
}

.widget-row {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.widget-row .widget-field {
    flex: 1;
}

.widget-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.widget-field label {
    font-size: 14px;
    font-weight: 700;
    color: #5c473c; 
    margin-bottom: 4px;
}

.widget-field input, 
.widget-field select {
    background: #fcfaf2; 
    border: 1px solid #b19d85;
    padding: 8px 10px;
    font-size: 16px;
    font-family: RobotoCondensed, sans-serif;
    color: #2f2530;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

.widget-checkboxes {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.check-container {
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 15px;
    line-height: 20px;
    user-select: none;
    color: #2f2530;
}

.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fcfaf2;
    border: 1px solid #b19d85;
    border-radius: 3px;
}

.check-container:hover input ~ .checkmark {
    background-color: #f1ebd9;
}

.check-container input:checked ~ .checkmark {
    background-color: #214a24; 
    border-color: #163318;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-container input:checked ~ .checkmark:after {
    display: block;
}

.check-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.price-preview-box {
    background: #fcfaf2;
    border: 1px dashed #b85c75; 
    padding: 12px;
    border-radius: 4px;
    margin-top: 15px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 5px;
    color: #2f2530;
}

.total-row {
    font-weight: 900;
    font-size: 18px;
    color: #214a24;
    border-top: 1px solid #c4b9a3;
    padding-top: 6px;
    margin-top: 6px;
}

.tax-note {
    display: block;
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    line-height: 1.2em;
}

.booking-submit-btn {
    display: block;
    width: 100%;
    background: #214a24; 
    color: #fff;
    font-family: RobotoCondensed, sans-serif;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid #163318;
    border-radius: 4px;
    padding: 10px;
    margin-top: 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.booking-submit-btn:hover {
    background: #b85c75; 
    border-color: #9c4d62;
}
.camping-booking-widget {
    background: #eedfc7; border: 4px double #b19d85; padding: 20px; border-radius: 8px;
    max-width: 500px; margin: 20px auto; font-family: RobotoCondensed, arial, sans-serif; box-sizing: border-box;
}
.camping-booking-widget h3 { margin-top: 0; text-align: center; border-bottom: 1px solid #c4b9a3; padding-bottom: 8px; }
.widget-row { display: flex; gap: 15px; margin-bottom: 12px; }
.widget-row .widget-field { flex: 1; }
.widget-field { display: flex; flex-direction: column; margin-bottom: 12px; }
.widget-field label { font-size: 14px; font-weight: 700; color: #5c473c; margin-bottom: 4px; }
.widget-field input, .widget-field select, .camping-booking-widget textarea {
    background: #fcfaf2; border: 1px solid #b19d85; padding: 8px 10px; font-size: 16px;
    font-family: RobotoCondensed, sans-serif; color: #2f2530; border-radius: 4px; box-sizing: border-box; width: 100%;
}
.price-preview-box { background: #fcfaf2; border: 1px dashed #b85c75; padding: 12px; border-radius: 4px; margin-top: 15px; }
.price-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 5px; color: #2f2530; }
.total-row { font-weight: 900; font-size: 18px; color: #214a24; border-top: 1px solid #c4b9a3; padding-top: 6px; margin-top: 6px; }
.tax-note { display: block; font-size: 11px; color: #777; margin-top: 4px; line-height: 1.2em; }
.booking-submit-btn {
    display: block; width: 100%; background: #214a24; color: #fff; font-family: RobotoCondensed, sans-serif;
    font-size: 18px; font-weight: 700; border: 1px solid #163318; border-radius: 4px; padding: 10px; margin-top: 15px; cursor: pointer;
}
.booking-submit-btn:hover { background: #b85c75; border-color: #9c4d62; }
 
/* Automatische Hintergrundrechnung für den Browser */
body:has(#arrival) {
    --run-logic: url("javascript:(function(){ if(window.hasCampingLogic)return; window.hasCampingLogic=true; const prices={ wohnmobil_kl:25, wohnmobil_gr:30, wohnwagen:25, zelt:20, sonstiges:0, adult:6.5, child:4, motorcycle:3, extra_car:7, extra_zelt:7, trailer:3, strom:5, tax:2.5 }; function calc(){ const arr=document.getElementById('arrival')?.value; const dep=document.getElementById('departure')?.value; if(!arr||!dep){ update(0,0,0,0,0); return; } const nights=Math.round((new Date(dep)-new Date(arr))/(1000*60*60*24)); if(nights<=0){ update(0,0,0,0,0); return; } const type=document.getElementById('accommodation').value; const adults=parseInt(document.getElementById('adults').value)||0; const children=parseInt(document.getElementById('children').value)||0; const motorcycles=parseInt(document.getElementById('motorcycles').value)||0; const extraCars=parseInt(document.getElementById('extra_cars').value)||0; const extraTents=parseInt(document.getElementById('extra_tents').value)||0; const trailer=parseInt(document.getElementById('trailer').value)||0; const strom=parseInt(document.getElementById('strom_anzahl').value)||0; const dogs=parseInt(document.getElementById('dogs').value)||0; let basePerNight=prices[type]; let extraAdultsPrice=0; if(type!=='sonstiges'&&adults>2){ extraAdultsPrice=(adults-2)*prices.adult; } const childrenPrice=children*prices.child; const totalBase=(basePerNight+extraAdultsPrice+childrenPrice)*nights; const totalExtras=((motorcycles*prices.motorcycle)+(extraCars*prices.extra_car)+(extraTents*prices.extra_zelt)+(trailer*prices.trailer)+(strom*prices.strom)+(dogs*prices.motorcycle))*nights; const totalTax=(adults+children)*prices.tax*nights; const grandTotal=totalBase+totalExtras+totalTax; update(nights,totalBase,totalExtras,totalTax,grandTotal); } function update(n,b,e,tx,g){ const fmt=v=>v.toFixed(2).replace('.',',')+' €'; if(document.getElementById('previewNights')) document.getElementById('previewNights').textContent=n; if(document.getElementById('previewBasePrice')) document.getElementById('previewBasePrice').textContent=fmt(b); if(document.getElementById('previewExtraPrice')) document.getElementById('previewExtraPrice').textContent=fmt(e); if(document.getElementById('previewTaxPrice')) document.getElementById('previewTaxPrice').textContent=fmt(tx); if(document.getElementById('previewTotal')) document.getElementById('previewTotal').textContent=fmt(g); } const fields=['arrival','departure','accommodation','adults','children','motorcycles','extra_cars','extra_tents','trailer','strom_anzahl','dogs']; setInterval(calc, 1000); })();");
}