/* ONAT Market theme - black / red / white */
:root{
    --brand-black:#000000;
    --brand-red:#D10000;
    --brand-white:#ffffff;
    --max-width:1200px;
}
body{
    background:var(--brand-white);
    color:var(--brand-black);
}
/* Use Inter as primary typeface for a clean modern look */
body, input, button, select, textarea{
      font-family: "Oswald", sans-serif;
    font-weight:400;
}
h1,h2,h3,h4,h5,h6{
      font-family: "Oswald", sans-serif;
    font-weight:800;
	text-transform: uppercase!important;
	margin-top: 5px!important;
}
.header .navbar-brand{font-size:1.5rem;color:var(--brand-white)}
.header .navbar-brand:focus:not(:focus-visible){outline:none}
.header .navbar-brand:focus-visible{outline:3px solid rgba(209,0,0,0.25);outline-offset:3px}
.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,0.9)}
.navbar-dark .navbar-nav .nav-link:focus:not(:focus-visible){outline:none}
.navbar-dark .navbar-nav .nav-link:focus-visible{outline:3px solid rgba(209,0,0,0.18);outline-offset:3px}
.navbar-dark .navbar-nav .nav-link:hover{color:var(--brand-red)}
.header{position:sticky;top:0;z-index:1030}
.hero{background:linear-gradient(180deg, var(--brand-red), #9e1016);padding:5rem 0}
.hero .btn-dark{background:var(--brand-black);border:0}
.btn-outline-light{border-color:rgba(255,255,255,0.85)}
.bg-danger{background:var(--brand-red) !important}
.bg-dark{background:var(--brand-black) !important}
.bg-white{background:var(--brand-white) !important}
.card{border:0}
.card .card-title{color:var(--brand-black)}
.footer a{color:rgba(255,255,255,0.85)}
.footer a:hover{color:var(--brand-red)}
/* focus styles for accessibility: show visible focus only for keyboard users (focus-visible).
   Hide outlines when an element receives focus via mouse to avoid persistent borders after click. */
/* Remove default focus visuals for non-keyboard interactions */
:focus:not(:focus-visible){
    outline: none !important;
    box-shadow: none !important;
}
/* Visible focus for keyboard users */
:focus-visible{
    outline:3px solid rgba(209,0,0,0.25);
    outline-offset:3px;
}
/* Buttons: match Bootstrap-like focus ring for keyboard users, but hide on mouse focus */
.btn:focus:not(:focus-visible){
    outline:none !important;
    box-shadow:none !important;
}
.btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 0.25rem rgba(209,0,0,0.25);
}
/* small responsive tweaks */
@media(min-width:992px){
    .hero{padding:6rem 0}
}
/* Responsive polish additions */
@media (max-width:1200px){
    :root{--max-width:1000px}
}
@media (max-width:992px){
    .hero{padding:3.5rem 0}
    .hero h1{font-size:2rem}
    .hero p.lead{font-size:1rem}
    .card-img-top{height:180px}
    .teaser-tiles .card-img-top{height:200px}
}
@media (max-width:576px){
    .hero{padding:2.5rem 0}
    .hero h1{font-size:1.6rem}
    .hero p.lead{font-size:0.95rem}
    /* make images shorter on small devices so cards don't dominate the viewport */
    .card-img-top{height:140px}
    .teaser-tiles .card-img-top, .teaser-tiles .card img{height:140px}
    /* increase tappable area for buttons/tiles */
    .flag-tile{height:72px}
    .flag-tile img{height:72px}
    .flag-tiles{padding:0.75rem 0}
    /* recipe cards: one per view on small devices */
    .recipe-card img{height:160px}
    .recipe-card{flex:0 0 calc(100% - 1rem);max-width:calc(100% - 1rem)}
    .recipes-strip{gap:0.75rem}
    /* modal full height on small screens */
    .modal-dialog{max-width:95%;margin:1.2rem auto}
    .modal-body{max-height:65vh;overflow:auto}
}

/* Mobile navbar tweaks: make logo slightly larger and keep burger on the right */
@media (max-width:576px){
    /* If brand is text, increase size for better legibility */
    .header .navbar-brand{font-size:2rem}
    /* If brand includes an <img>, allow larger image without overflowing */
    .header .navbar-brand img{height:40px;max-height:40px;width:auto}
    /* Ensure toggler (burger) stays on the right side */
    .navbar .navbar-collapse{order:2}
    .navbar-toggler{order:3;margin-left:auto}
    /* Slightly increase tappable area */
    .navbar-toggler{padding:0.45rem 0.65rem}
}

/* Medium breakpoint tweaks to show 2 recipe cards */
@media (min-width:577px) and (max-width:991px){
    .recipe-card{flex:0 0 calc(50% - 1rem);max-width:calc(50% - 1rem)}
    .recipe-card img{height:150px}
}

/* Larger screens: slightly larger hero text and balanced layout */
@media (min-width:1200px){
    .hero h1{font-size:3rem}
    .hero p.lead{font-size:1.25rem}
}
/* Utility helpers */
.container{max-width:var(--max-width)}
.text-brand-red{color:var(--brand-red)}
/* subtle shadow for cards */
.shadow-sm{box-shadow:0 1px 6px rgba(0,0,0,0.08)}
/* sticky footer spacing fix */

.flag-tiles{
    display:flex;
    gap:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    align-items:center;
    padding:0.5rem 0;
    /* make the strip full-bleed to the viewport edges while inside a centered container */
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
}
.flag-tiles::-webkit-scrollbar{height:0;display:none}
.flag-tiles{scrollbar-width:none}
.flag-tile{
    flex:0 0 calc(100% / 6); /* show ~6 flags per view on wide screens */
    max-width:calc(100% / 6);
    height:64px; /* fixed square-ish height so flags look uniform */
    border-radius:0;
    overflow:hidden;
    display:inline-block;
    padding:0;
    border:0;
    background:transparent;
    scroll-snap-align:center;
}
.flag-tile img{height:100%;object-fit:cover;display:block}
.flag-tile:focus:not(:focus-visible){
    outline:none;
}
.flag-tile:focus-visible{
    outline:3px solid rgba(209,0,0,0.35);
    outline-offset:2px;
}
.flag-tile[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(209,0,0,0.12);transform:scale(0.995)}

@media(max-width:992px){
    .flag-tile{flex:0 0 calc(100% / 5);max-width:calc(100% / 5)}
}
@media(max-width:576px){
    .flag-tile{flex:0 0 calc(100% / 4);max-width:calc(100% / 4)}
}
.tag{border-radius:4px}

/* Ensure teaser tile images have uniform height */
.teaser-tiles .card-img-top,
.teaser-tiles .img-fluid,
.teaser-tiles .card img{
    height:220px; /* default tile image height */
    object-fit:cover;
    width:100%;
}

@media(min-width:992px){
    .teaser-tiles .card-img-top,
    .teaser-tiles .img-fluid,
    .teaser-tiles .card img{
        height:260px;
    }
}

/* Ensure product cards also have consistent thumbnails */
.card-img-top{height:200px;object-fit:cover}
.card .card-img-top{height:200px}
.card .card-body{min-height:100px}

/* Recipes slider */
.recipes-strip{display:flex;gap:1rem;overflow-x:auto;padding:0.5rem 0;scroll-snap-type:x mandatory;align-items:start}
.recipe-card{flex:0 0 calc(100%/3 - 1rem);max-width:calc(100%/3 - 1rem);background:var(--brand-white);color:var(--brand-black);border-radius:8px;overflow:hidden;scroll-snap-align:center}
.recipe-card:focus{outline:3px solid rgba(209,0,0,0.18);outline-offset:4px}
.recipe-card img{width:100%;height:160px;object-fit:cover;display:block}
.recipe-card .card-body{padding:1rem}
.recipe-meta{font-size:0.9rem;color:#666}

@media(max-width:992px){
    .recipe-card{flex:0 0 calc(100%/2 - 1rem);max-width:calc(100%/2 - 1rem)}
}
@media(max-width:576px){
    .recipe-card{flex:0 0 calc(100% - 1rem);max-width:calc(100% - 1rem)}
}

/* hide overflow scrollbar for recipes-strip while allowing programmatic scroll */
.recipes-strip{scrollbar-width:none}
.recipes-strip::-webkit-scrollbar{display:none}

/* Legal modal typography: make headlines more compact for Impressum/Datenschutz */
#impressum-modal-body h1, #datenschutz-modal-body h1{
    font-size:1.25rem; /* smaller than page h1 */
    margin-bottom:0.5rem;
    line-height:1.2;
    font-weight:600;
}
#impressum-modal-body h2, #datenschutz-modal-body h2{
    font-size:1rem; /* compact h2 */
    margin-top:0.6rem;
    margin-bottom:0.35rem;
    line-height:1.25;
    font-weight:600;
}
#impressum-modal-body p, #datenschutz-modal-body p{
    font-size:0.95rem;
    line-height:1.45;
    margin-bottom:0.6rem;
}
#impressum-modal-body .container, #datenschutz-modal-body .container{
    padding:0 0.25rem; /* tighten container padding inside modal */
}

	
	.display-5 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 600!important;
    line-height: 1.2;
		  font-family: "Oswald", sans-serif!important;
		text-transform: uppercase!important;
}