/* Source Sans 3 – Variable Webfonts (WOFF2) */
@font-face {
  font-family: 'Source Sans 3';
  src: url('/media/fonts/source-sans-3/SourceSans3VF-Upright.otf.woff2') format('woff2-variations');
  font-weight: 200 900;   /* deckt 200–900 ab: Light(300), Regular(400), Semibold(600), Bold(700), Black(900) */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('/media/fonts/source-sans-3/SourceSans3VF-Italic.otf.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}


:root{
  --bs-primary:#E65100;
  --bs-secondary:#5D4037;
  --bs-light:#FBFBFB;
  --bs-dark:#333333;
  --bs-font-sans-serif:'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Einfarbiger Grundton + dezente Eckenverläufe */
  --bg-solid:#FAF7F2;
  --corner-accent-1: rgba(230,81,0,.06);  /* oben links */
  --corner-accent-2: rgba(93,64,55,.05);  /* oben rechts */

  --glass-bg: rgba(255,255,255,.65);
  --glass-bd: 1px solid rgba(255,255,255,.35);
  --shadow-soft: 0 8px 25px rgba(0,0,0,.06);
}

/* Skiplink für Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; z-index:2000;
  background:#000; color:#fff; border-radius:.25rem;
}

body{
  font-family:var(--bs-font-sans-serif);
  background: var(--bg-solid);
  background-attachment: fixed;
  color: var(--bs-dark);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Leichte Farbverläufe in den oberen Ecken */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 520px at -10% -10%, var(--corner-accent-1), transparent 60%),
    radial-gradient(820px 520px at 110% -10%, var(--corner-accent-2), transparent 60%);
  z-index:-1;
}

.site-wrapper{ flex:1 0 auto; }

h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--bs-secondary); }

.btn-primary{ background-color:var(--bs-primary); border-color:var(--bs-primary); font-weight:600; }
.btn-primary:hover{ background-color:#F57C00; border-color:#F57C00; }
a{ color:var(--bs-primary); text-decoration:none; }
a:hover{ color:#F57C00; text-decoration:underline; }

/* Hero Banner */
.hero-banner{
  position:relative;
  width:100%;
  height: 60vh;
  height: calc(var(--vh, 1vh) * 60);
  min-height: 360px;
  max-height: 640px;
  overflow:hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-soft);
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  z-index: 2;
}
.hero-content{
  position:absolute; inset:0;
  z-index:3;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:#fff; text-align:center; padding:1rem;
}

/* Typo-Hierarchie: Logo > H1 */
.hero-content h1{
  color:#fff;
  font-weight:800;
  font-size:clamp(1.6rem, 2.2vw + 1rem, 2.6rem);
  letter-spacing:.2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,.45);
  margin: .35rem 0 1rem 0;
}

.hero-search-form{ max-width:700px; width:100%; position:relative; margin:0 auto; }
.hero-search-input{
  height:56px; padding-left:20px; padding-right:124px;
  border-radius:48px; border:0; font-size:1.1rem;
}
.hero-search-input:focus{ box-shadow:0 0 0 4px rgba(255,255,255,.4); border:0; }
.hero-search-button{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  height:44px; width:110px; border-radius:48px; font-weight:700;
}

.carousel.hero-carousel, .carousel.hero-carousel .carousel-inner, .carousel.hero-carousel .carousel-item{ height:100%; }
.hero-slide-img{
  object-fit:cover; width:100%; height:100%;
  transform: scale(1.05);
  animation: kenburns 14s ease-in-out infinite;
}
@keyframes kenburns{
  0%{ transform: scale(1.05) translate(0,0); }
  50%{ transform: scale(1.12) translate(2%, -1%); }
  100%{ transform: scale(1.05) translate(0,0); }
}
@media (prefers-reduced-motion: reduce){ .hero-slide-img{ animation:none; } }

/* Marken-Schriftzug – zentriert über der H1 */
.brand-mark{
  position:relative;
  z-index:4;
  text-align:center;
  user-select:none;
  margin-bottom:.25rem;
}
.brand-mark .brand-title{
  color:#fff;
  font-weight:900;
  font-size:clamp(2rem, 4vw + 1rem, 3.2rem);
  line-height:1.05;
  letter-spacing:.6px;
  text-shadow: 0 3px 12px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.25);
}
.brand-mark .brand-tagline{
  margin-top:2px;
  color:rgba(255,255,255,.94);
  font-size:clamp(.8rem, .6vw + .6rem, 1rem);
  font-weight:600;
  letter-spacing:.25px;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  opacity:.98;
}

/* Quicklinks unter dem Banner */
.quicklinks-bar{
  position:relative;
  z-index:4;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border-bottom: var(--glass-bd);
}
/* Mobil komplett ausblenden, damit kein Scrollbalken erscheint */
@media (max-width: 575.98px){
  .quicklinks-bar{ display:none !important; }
}
.quicklinks-scroll{
  display:flex; gap:.5rem; padding:.75rem .5rem; overflow:auto hidden; scroll-behavior:smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.quicklinks-scroll::-webkit-scrollbar{ display:none; }
.quicklinks-scroll .btn{
  white-space:nowrap; border-radius:999px; border:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.quicklinks-scroll .btn .bi{ vertical-align: text-bottom; margin-right:.35rem; }

/* Hauptnavigation (Sticky) */
.main-navbar{
  top:0; z-index:1030; background-color:#fff!important; border-bottom:1px solid #eee;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}
.navbar-brand{ font-weight:700; font-size:1.5rem; color:var(--bs-primary)!important; }
.navbar-brand:hover{ color:var(--bs-secondary)!important; }
.nav-link{ font-weight:600; color:var(--bs-secondary); }
.nav-link:hover{ color:var(--bs-primary); }

/* Menü-Button: Icon größer & deutlicher */
.btn-menu-toggle{
  font-size:1.1rem; font-weight:600; color:var(--bs-secondary);
  display:flex; align-items:center; gap:.25rem;
}
.btn-menu-toggle:hover{ color:var(--bs-primary); }
.btn-menu-toggle .bi{
  font-size:2rem;
  line-height:1;
  vertical-align:middle;
  color:var(--bs-primary);
  margin-right:.35rem;
}

/* Offcanvas Sidebar */
.offcanvas-header{ border-bottom:1px solid #eee; }
.offcanvas-title{ color:var(--bs-primary); font-weight:700; }
.nav-kategorien .nav-link{
  font-size:1.1rem; padding:.6rem 1.25rem; color:#333; font-weight:400; border-radius:.3rem;
}
.nav-kategorien .nav-link:hover{ background:#f5f5f5; color:var(--bs-primary); }
.nav-kategorien .nav-link.active{ background:var(--bs-primary); color:#fff; font-weight:600; }
.nav-kategorien .nav-link .bi{ margin-right:.75rem; font-size:1.2rem; color:#aaa; vertical-align:middle; }
.nav-kategorien .nav-link.active .bi{ color:#fff; }

/* Rezept-Karten */
.recipe-card{
  box-shadow:0 4px 12px rgba(0,0,0,.05); border:1px solid #eee;
  transition: transform .25s ease, box-shadow .25s ease; text-decoration:none!important; color:var(--bs-dark);
  display:flex; flex-direction:column;
}
.recipe-card:hover{ transform: translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,.10); color:var(--bs-dark); }
.recipe-card .card-img-container{ position:relative; overflow:hidden; aspect-ratio:4/3; background:#f0f0f0; }
.recipe-card .card-img-top{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.recipe-card:hover .card-img-top{ transform: scale(1.06); }
.recipe-card .card-body{ flex:1; display:flex; flex-direction:column; padding:1rem; }
.recipe-card .card-title{
  font-size:1.1rem; font-weight:600; color:var(--bs-secondary);
  min-height:48px; margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}
.recipe-card .card-author{ font-size:.9rem; color:#777; margin-bottom:1rem; }
.recipe-card-footer{ margin-top:auto; padding-top:1rem; border-top:1px solid #f0f0f0; font-size:.9rem; color:#555; }
.recipe-card-footer .bi{ margin-right:.3rem; vertical-align:text-bottom; color:var(--bs-primary); }
.recipe-stars{ color:#FFC107; font-size:.85rem; }
.recipe-stars .bi-star{ color:#ddd; }

/* NEU: Splide.js Anpassungen */
.splide__slide {
  /* Stellt sicher, dass die h-100-Karten die Höhe des Sliders bestimmen */
  display: flex;
  height: auto;
}
.splide__slide .card {
  /* Stellt sicher, dass die Karte die volle Breite der Slide einnimmt */
  width: 100%;
}
/* Pfeile anpassen */
.splide__arrow {
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  width: 2.75rem;
  height: 2.75rem;
}
.splide__arrow svg {
  fill: var(--bs-primary);
  width: 1.25rem;
  height: 1.25rem;
}
.splide__arrow:hover:not(:disabled) {
  background: var(--bs-primary);
}
.splide__arrow:hover:not(:disabled) svg {
  fill: #fff;
}
/* Pagination-Punkte */
.splide__pagination__page {
  background: #ccc;
  width: 10px;
  height: 10px;
  margin: 0 4px;
}
.splide__pagination__page.is-active {
  background: var(--bs-primary);
  transform: scale(1.2);
}

/* Horizontale Karte (Rezept des Tages) */
.card-horizontal-img{ width:100%; height:250px; object-fit:cover; }
@media (min-width:768px){
  .card-horizontal-img{
    height:100%;
    border-top-left-radius:var(--bs-card-inner-border-radius);
    border-bottom-left-radius:var(--bs-card-inner-border-radius);
    border-top-right-radius:0;
  }
}
.card-horizontal .card-title{ font-size:1.5rem; }

/* Pagination */
.pagination .page-item .page-link{ color:var(--bs-primary); }
.pagination .page-item.active .page-link{ background:var(--bs-primary); border-color:var(--bs-primary); color:#fff; }
.pagination .page-item.disabled .page-link{ color:#999; }

/* Footer */
.site-footer{ background:var(--bs-secondary); color:#f0f0f0; font-size:.95rem; }
.site-footer .footer-logo{ font-size:1.8rem; font-weight:700; color:var(--bs-primary); text-decoration:none; }
.site-footer .footer-logo:hover{ color:#fff; }
.site-footer .footer-links a{ color:#f0f0f0; text-decoration:none; display:block; margin-bottom:.5rem; transition:color .2s; }
.site-footer .footer-links a:hover{ color:#fff; text-decoration:underline; }
.site-footer .footer-title{ font-weight:600; color:#fff; margin-bottom:1rem; border-bottom:2px solid var(--bs-primary); padding-bottom:.5rem; display:inline-block; }
.site-footer .social-icons a{ color:#f0f0f0; font-size:1.5rem; margin-right:1rem; text-decoration:none; }
.site-footer .social-icons a:hover{ color:var(--bs-primary); }
.site-footer .footer-bottom{ background-color: rgba(0,0,0,.2); color:#ccc; }
.site-footer .footer-bottom a{ color:#fff; font-weight:600; text-decoration:none; }
.site-footer .footer-bottom a:hover{ text-decoration:underline; }

/* Reveal-on-scroll Effekte */
[data-reveal]{ opacity:0; transform: translateY(24px) scale(.99); transition: opacity .7s ease, transform .7s ease; }
.reveal-show{ opacity:1; transform: translateY(0) scale(1); }

/* Diverse */
.img-fallback{ filter: grayscale(.1) contrast(.95); }

/* Kein smooth scroll global, damit nichts animiert */
html { scroll-behavior: smooth; }
/* Während wir positionieren, verstecken wir nur den Main-Inhalt – Header bleibt sichtbar */
/* Aber: wenn eine Hash-Zielmarke aktiv ist (#pos1 etc.), KEINE Animation */
html:has(:target) { scroll-behavior: auto !important; }
body.prejump #pos1 { opacity: 0; }
#pos1 { opacity: 1; }
/* Kurzes, unaufdringliches Einblenden */
@media (prefers-reduced-motion: no-preference) {
  #pos1 { transition: opacity .18s ease-out; }
}

/* Offset für Sticky-Header + 60px Zusatzluft */
#pos1 { scroll-margin-top: calc(var(--nav-h, 72px) + 100px); }