/**
 * Website Baker template: andreas01
 * 
 * Original design: andreas01 (v3.0 - Apr 24, 2008) - A free xhtml/css website template by Andreas Viklund.
 * For more information, see http://andreasviklund.com/templates/andreas01/
 * Ported to Website Baker by M. Gallas.
 * Login form and support to display news in the right column added by Christian Sommer. 
 *
 * This file contains defintions for the CSS layout and the styles shown in the frontend.
 *
 * LICENSE: Open Source
 * 
 * @author     Andreas Viklund (WB port by M. Gallas, adapted by C. Sommer)
 * @copyright  Open Source
 * @license    http://andreasviklund.com/about/copyright/
 * @version    3.00
 * @platform   Website Baker 2.7
*/

/* Main body */
body {background:#ffffff; color:#404040; font:76% Verdana,Tahoma,Arial,sans-serif; margin:0 auto; padding:0;}
#wrap {background:#ffffff; color:#404040; margin:0 auto; width: 1024px;}

a {background-color:inherit; color:#286ea0; font-weight:700; text-decoration:none;}
a:hover {background-color:inherit; color:#286ea0; text-decoration:underline;}
a img {border:0;}
p {margin:0 0 1.4em;}

#header {height:45px; margin: 0; padding:0; color:#505050;}
#header p {float:right; font-size: 2em; font-weight:800; line-height:45px; height:45px; margin:0; text-align:right; width:400px; overflow:hidden;}
#mobile-topbar {display:block;}
#frontphoto {border:0; display:block; width:100%; height:auto; margin:0 0 0;}

/* Top bar: logo left (10% smaller), banner left-aligned at full height.
   NOTE: banner retains its original height; only the logo is shrunk. */
#bannerbar {display:flex; align-items:center; margin:0 0 5px;}
#site-logo {display:block; width:135px; height:135px; flex:none; object-fit:contain;}
#site-banner {display:block; height:150px; width:auto; margin:0; max-width:100%; object-fit:contain;}

#leftside {clear:left; float:left; margin:0 0 5px; padding:0; width:150px; font-size: 1.2em ;background-color: #ffffff;}
#rightside {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:140px;}
#rightside span.news {font-size: 1.2em; font-weight: 700; }
#leftside p,#leftside ul, #rightside p,#rightside ul {margin:0 0 16px; padding:0;}
#leftside p, #rightside p {font-size:0.9em; line-height:1.4em;}
#leftside li, #rightside li {line-height:1.2em; list-style:none; margin:0 0 6px; padding:0;}
#leftside ul ul, #rightside ul ul {margin:6px 0 0 10px; padding:0;}
#leftside ul ul li, #rightside ul ul li {margin:0 0 4px;}
#leftside ul ul li a, #rightside ul ul li a {font-weight:400;}
#leftside h2,#leftside h3, #rightside h2,#rightside h3 {color:#000000; font-size:1.2em; margin:0 0 8px; padding:0;}

#leftside ul.avmenu, #rightside ul.avmenu {display:block; list-style:none; margin:0 0 18px 0; padding:0; width:140px;}
#leftside ul.avmenu li, #rightside ul.avmenu li {display:inline; line-height:1.4em; padding:0; width:140px;}
#leftside ul.avmenu li a, #rightside ul.avmenu li a {background-color:#f4f4f4; border-left:4px solid #990000; color:#404040; float:left; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:134px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current, #rightside ul.avmenu li a:hover,#rightside ul.avmenu li a.current {background-color:#990000; border-left:4px solid #990000; color:#ffffff;}
#leftside ul.avmenu ul, #rightside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px; width:125px;}
#leftside ul.avmenu ul a, #rightside ul.avmenu ul a {font-weight:400; padding:3px 1px 3px 5px; width:119px;}
#leftside ul.avmenu ul ul, #rightside ul.avmenu ul ul {width:113px;}
#leftside ul.avmenu ul ul a, #rightside ul.avmenu ul ul a {width:100px;}

#content {border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; line-height:1.5em; margin:0 150px 5px; padding:0 10px;}
#contentwide {border-left:1px solid #e0e0e0; line-height:1.5em; margin:0 0 5px 150px; padding:0 0 0 10px;}
#contentwide2 {border-right:1px solid #e0e0e0; line-height:1.5em; margin:0 150px 5px 0; padding:0 10px 0 0;}
#content h1,#contentcswide h1,#contentwide2 h1 {font-size:1.8em; margin:0 0 10px;}
#content h2,#contentwide h2,#contentwide2 h2 {font-size:1.6em; margin:0 0 10px;}
#content h3,#contentwide h3,#contentwide2 h3 {font-size:1.3em; margin:0 0 8px;}
#content h4,#contentwide h4,#contentwide2 h4 {font-size:1.2em; margin:0 0 8px;}
#content h5,#contentwide h5,#contentwide2 h5 {font-size:1.0em; margin:0 0 8px;}
#content h6,#contentwide h6,#contentwide2 h6 {font-size:1.0em; margin:0 0 8px;}
#content img,#contentwide img,#contentwide2 img {background:#ccc; border:4px solid #f0f0f0; color:#303030; display:inline; padding:1px;}
#content ul,#contentwide ul,#contentwide2 ul,#content ol,#contentwide ol,#contentwide2 ol {margin:0 0 16px 20px; padding:0;}
#content li,#contentwide li,#contentwide2 li {margin:0; padding:0 0 0 5px;}
#content ul ul,#contentwide ul ul,#contentwide2 ul ul,#content ol ol,#contentwide ol ol,#contentwide2 ol ol {margin:0 0 0 16px; padding:0;}

#footer {background:#ffffff; border-top:1px solid #e0e0e0; clear:both; color:gray; margin:20px 0 0; padding:10px 0; text-align:center; width:100%; line-height:1.5em; font-size:0.9em;}
#footer p {margin:0; padding:0;}
#footer a {background-color:#fff; color:gray; font-weight:400; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#footer span {font-size:1.2em;}

.left {float:left; margin:3px 10px 2px 0;}
.right {float:right; margin:2px 0 2px 10px;}
.textright {text-align:right; margin:5px 0;}
.center {text-align:center;}
.small {font-size:0.8em;}
.bold {font-weight:700;}
.timestamp {font-size:1.2em; margin:-5px 0 15px 10px;}
.timestamp a {font-weight:400;}
.announce {background-color:#f4f4f4; border-left:4px solid #990000; clear:left; color:#404040; font-size:0.9em; line-height:1.5em; margin:10px 0px; padding:7px 5px 2px 5px; width:126px;}
.announce p {margin:10px 0 0; padding:0;}
.postinfo {background-color:#f4f4f4; border-left:4px solid #ccc; color:#606060; font-size:0.9em; line-height:1.4em; margin:1px 0 20px; padding:8px 5px 8px 8px;}
.clearing {clear:left; margin:0; padding:0; visibility:hidden;}
.hide {display:none;}

.announce fieldset { border: none; margin: 0; padding: 0; }
.announce legend { display: block; font-weight: bold; }
.announce input { width: 120px; margin-top: 0.3em; }
.search_string { width: 120px; margin-left: 0;}
#wb_search, #wb_login, #wb_logout  { width: 120px; color:#505050; font-size:0.9em; line-height:1.5em; font-weight: bold; }

/* ===================================================================
   RESPONSIVE LAYOUT (mobile first fallback, keeps desktop layout intact)
   =================================================================== */
#wrap {max-width:100%; overflow-x:clip; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#frontphoto {max-width:100%; height:auto;}
#bannerbar {max-width:100%;}
#content img, #contentwide img, #contentwide2 img, #content table, #contentwide table, #contentwide2 table,
#content td, #contentwide td, #contentwide2 td {max-width:100%;}

/* Mobile burger menu (hamburger icon). Hidden on desktop, shown via media query below. */
#nav-toggle {
	display:none;
	background:transparent; border:0; cursor:pointer;
	padding:0; margin:0; width:44px; height:44px;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
#nav-toggle span {
	display:block; width:28px; height:4px; background:#990000;
	margin:6px auto; border-radius:2px;
}

/* Tablet (landscape) and small desktops */
@media screen and (max-width: 980px) {
	#rightside {display:none;}
	#content {margin:0 0 5px 150px;}
	body {background-attachment:scroll;}
}

/* Small tablets / large phones in portrait -> single column layout */
@media screen and (max-width: 900px) {
	/* remove dark design band so content stays readable when stacked */
	body {background:#ffffff;}
	#wrap {width:100%; background:#ffffff;}

	/* banner: full width, sits at the very top and scrolls away */
	#bannerbar {display:block;}
	#site-logo {display:none;}
	#site-banner {display:block; width:100%; height:auto; margin:0; max-width:100%; padding:10px; box-sizing:border-box;}

	/* sticky top bar: burger left + page title; stays visible when scrolling */
	#mobile-topbar {position:sticky; top:0; z-index:50; display:flex; align-items:stretch; width:100%; background:#ffffff; box-shadow:0 2px 4px rgba(0,0,0,0.12);}
	#mobile-topbar #header {flex:1 1 auto; min-width:0; height:auto; margin:0; padding:0; color:#404040;}
	#mobile-topbar #header p {float:none; width:auto; height:auto; line-height:1.2; text-align:left; padding:6px 8px; font-size:1.3em; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	#nav-toggle {display:flex; flex-direction:column; justify-content:center; align-items:center; position:static; flex:none; width:44px; height:44px; align-self:center; background:rgba(255,255,255,0.9); border-radius:4px; margin-left:4px;}

	#header p {float:none; clear:both; width:auto; text-align:left;}

	/* stack everything into a single column */
	#leftside, #rightside, #content, #contentwide, #contentwide2 {
		float:none; width:auto; clear:both; margin:0 0 10px; padding:0 10px; border:0; box-sizing:border-box;
	}
	#leftside {background-color:#ffffff; color:#404040;}
	#rightside {display:block;}

	/* menu links take full width, light background */
	#leftside ul.avmenu, #rightside ul.avmenu {width:auto;}
	#leftside ul.avmenu li a, #rightside ul.avmenu li a {float:none; width:auto; display:block; background-color:#f0f0f0; border-left:4px solid #990000; color:#404040; border-bottom:1px solid #d0d0d0; margin-bottom:2px;}
	#leftside ul.avmenu ul, #rightside ul.avmenu ul {width:auto; margin-left:12px;}

	/* light announcement box */
	.announce {width:auto; background-color:#f4f4f4; border-left:4px solid #990000; color:#404040;}
	.announce legend {color:#404040;}

	/* tables never exceed the column and wrap */
	#content table, #contentwide table, #contentwide2 table {width:100%; max-width:100%; table-layout:auto;}
	#content table td, #contentwide table td, #contentwide2 table td {white-space:normal; overflow-wrap:anywhere; word-break:break-word;}
	#content table img, #contentwide table img {max-width:100%; height:auto;}
	/* keep content images proportional (do not stretch fixed height+width) */
	#content img, #contentwide img, #contentwide2 img {max-width:100% !important; height:auto !important; object-fit:contain; box-sizing:border-box !important;}
	/* bakery item detail: constrain the cell so the image never overflows */
	#content td.mod_bakery_main_td_f,
	#contentwide td.mod_bakery_main_td_f {box-sizing:border-box; max-width:100%; overflow:hidden;}
	/* detail page main image: fit width, never cropped, never overflowing */
	.mod_bakery_item_img_f {width:100%; height:auto !important; max-width:100%; object-fit:contain; display:block; margin:0 auto; box-sizing:border-box;}

	/* bakery overview items: stack one per row */
	#mod_bakery_wrapper_f td.mod_bakery_main_td_f,
	#mod_bakery_wrapper td.mod_bakery_main_td_f {display:block; width:100%; margin:0 0 15px;}

	#footer {width:100% !important; max-width:100%; min-width:0; margin:20px 0 0; box-sizing:border-box; overflow:hidden; background:#ffffff;}

	/* burger menu (mobile): the open menu becomes a fixed overlay that is
	   anchored to the bottom edge of the sticky top bar via JS, so it stays
	   visible and clickable below the bar whether scrolled or not */
	#nav-toggle {display:block;}
	#leftside ul.avmenu {display:none;}
	#leftside.open {position:fixed; left:0; right:0; z-index:40;
		background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,0.15);
		padding:0; margin:0; border:0;
		max-height:calc(100vh - 44px); overflow-y:auto; box-sizing:border-box;}
	#leftside.open ul.avmenu {display:block;}
}

/* Small phones */
@media screen and (max-width: 480px) {
	body {font:78% Verdana,Tahoma,Arial,sans-serif;}
	#header a {font-size:1.5em;}
	#header p {font-size:1.3em;}
	.announce input, .search_string, #wb_search, #wb_login, #wb_logout {width:100%; max-width:240px;}
}

/* Bakery catalog: keep all item images the same size (desktop + mobile) */
.mod_bakery_main_thumb_f, .mod_bakery_main_img_f {
	width:140px; height:105px; object-fit:cover; object-position:center; border:none;
}

/* Back link shown on bakery item detail pages */
.bakery-back-link {
	display:inline-block; margin:0 0 12px; padding:6px 10px;
	background:#990000; color:#fff; text-decoration:none; font-weight:bold; border-radius:3px;
}
.bakery-back-link:hover {background:#7a0000;}

/* Previous/next navigation on bakery item detail pages */
.bakery-nav {
	margin:16px 0 4px; padding:10px 0; border-top:1px solid #ddd;
	text-align:center;
}
.bakery-nav a {
	display:inline-block; width:44px; height:44px; line-height:44px;
	background:#990000; color:#fff; text-decoration:none; font-weight:bold;
	border-radius:3px; text-align:center; font-size:22px;
}
.bakery-nav a:hover {background:#7a0000;}
.bakery-nav-prev {margin-right:10px;}

/* Katalog-Hauptseite: Liste aller Artikel nur mobil sichtbar */
.roki-mobile-only {display:none;}
@media (max-width:900px) {
	.roki-mobile-only {display:block;}
	.roki-mobile-only h3 {margin:22px 0 4px; font-size:1.15em; text-align:center;}
	.roki-mobile-only h3 a {color:#404040; text-decoration:none;}
	.roki-mobile-only h3 a:hover {text-decoration:underline;}
	.roki-mobile-only table {margin:0 auto; border-collapse:collapse; border-top:1px solid #d0d0d0; padding-top:8px;}
	.roki-mobile-only .mod_bakery_main_td_f {display:block; text-align:center; vertical-align:top; padding:10px 0;}
	.roki-mobile-only .mod_bakery_main_title_f {font-weight:bold; font-size:12px;}
	.roki-mobile-only .mod_bakery_main_thumb_f {width:160px; height:120px; object-fit:cover; object-position:center; border:none; max-width:100%;}
}