:root{
      --bg:#fff7ed;
      --section:#ffedd5;
      --primary:#f97316;
      --text:#78350f;
      --white:#fffaf5;
    }
    *{box-sizing:border-box}
    body{
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',sans-serif;
      margin:0;
      overflow-x:hidden;
    }
    h1,h2,h3,h4,h5{
      font-family:'Cormorant Garamond',serif;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--text);
      margin-top:0;
    }
    p,a,li,span{
      color:var(--text);
    }
    .page-shell{
      max-width:1440px;
      margin:0 auto;
      padding:12px;
      position:relative;
    }
    .blur-orb{
      position:fixed;
      border-radius:50%;
      filter:blur(70px);
      opacity:.28;
      z-index:0;
      pointer-events:none;
    }
    .orb-1{
      width:220px;height:220px;
      background:#fdba74;
      top:40px;left:-50px;
    }
    .orb-2{
      width:260px;height:260px;
      background:#fed7aa;
      right:-60px;top:240px;
    }
    .orb-3{
      width:240px;height:240px;
      background:#fb923c;
      bottom:80px;left:20%;
      opacity:.18;
    }
    .topbar{
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:rgba(255,237,213,.82);
      border:1px solid rgba(249,115,22,.16);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border-radius:0;
      padding:10px 14px;
      margin-bottom:12px;
    }
    .brand-wrap{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .brand-badge{
      width:42px;
      height:42px;
      background:var(--primary);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      box-shadow:0 10px 24px rgba(249,115,22,.22);
    }
    .brand-title{
      line-height:1;
    }
    .brand-title strong{
      display:block;
      font-family:'Cormorant Garamond',serif;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:1.1rem;
    }
    .brand-title span{
      display:block;
      font-size:.82rem;
      opacity:.88;
    }
    .sidenav{
      background:var(--bg);
    }
    .sidenav li>a{
      color:var(--text);
      font-weight:600;
    }
    .sidenav-trigger i{
      color:var(--primary);
      font-size:2rem;
    }
    .desktop-mini-nav{
      display:none;
      gap:8px;
      align-items:center;
    }
    .desktop-mini-nav a{
      padding:10px 14px;
      background:transparent;
      border:1px solid rgba(249,115,22,.18);
      text-transform:uppercase;
      letter-spacing:.07em;
      font-size:.78rem;
      color:var(--text);
      transition:.3s ease;
    }
    .desktop-mini-nav a:hover{
      background:var(--primary);
      color:#fff;
      transform:scale(1.04);
    }
    .main-layout{
      position:relative;
      z-index:2;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .content-area{
      flex:1 1 auto;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .sidebar{
      width:310px;
      flex:0 0 310px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .panel{
      background:rgba(255,237,213,.82);
      border:1px solid rgba(249,115,22,.15);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      overflow:hidden;
    }
    .hero{
      display:flex;
      gap:12px;
      min-height:460px;
      padding:12px;
      align-items:stretch;
    }
    .hero-copy{
      flex:1.15;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:14px;
      padding:6px;
    }
    .hero-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#fff3e4;
      border:1px solid rgba(249,115,22,.18);
      padding:8px 12px;
      width:max-content;
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-weight:700;
    }
    .hero h1{
      font-size:clamp(2.4rem,6vw,4.8rem);
      line-height:.95;
      margin:0;
    }
    .hero p{
      font-size:1rem;
      line-height:1.7;
      max-width:62ch;
      margin:0;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .square-btn{
      background:var(--primary);
      color:#fff;
      border:none;
      border-radius:0;
      padding:0 22px;
      height:46px;
      line-height:46px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:700;
      box-shadow:none;
      transition:.3s ease;
    }
    .square-btn:hover{
      background:#ea580c;
      transform:scale(1.05);
      box-shadow:none;
    }
    .ghost-btn{
      background:transparent;
      color:var(--text);
      border:1px solid rgba(249,115,22,.25);
      border-radius:0;
      padding:0 20px;
      height:46px;
      line-height:44px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:700;
      transition:.3s ease;
      display:inline-block;
    }
    .ghost-btn:hover{
      transform:scale(1.05);
      background:#fff4e7;
    }
    .hero-metrics{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .metric{
      min-width:120px;
      padding:12px;
      background:#fff4e8;
      border-left:3px solid var(--primary);
      transition:.35s ease;
    }
    .metric:hover{
      transform:scale(1.05);
    }
    .metric strong{
      display:block;
      font-size:1.45rem;
      font-family:'Cormorant Garamond',serif;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .metric span{
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .hero-visual{
      flex:.85;
      display:flex;
      flex-direction:column;
      gap:12px;
      justify-content:space-between;
    }
    .hero-main-image{
      position:relative;
      min-height:290px;
      background:
        linear-gradient(160deg, rgba(255,255,255,.45), rgba(249,115,22,.08)),
        url('img/die-kunst-des-kochens.png') center/cover no-repeat;
      border-radius:24px;
      overflow:hidden;
      transition:.4s ease;
    }
    .hero-main-image:hover{
      transform:scale(1.03);
    }
    .floating-note{
      position:absolute;
      right:14px;
      bottom:14px;
      background:rgba(255,247,237,.88);
      padding:12px 14px;
      max-width:220px;
      backdrop-filter:blur(10px);
      border-left:3px solid var(--primary);
    }
    .floating-note strong{
      display:block;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:4px;
      font-size:.9rem;
    }
    .hero-mini-row{
      display:flex;
      gap:12px;
    }
    .mini-card{
      flex:1;
      background:#fff4e7;
      padding:14px;
      min-height:100px;
      transition:.35s ease;
    }
    .mini-card:hover{
      transform:scale(1.05);
    }
    .mini-card i{
      color:var(--primary);
      margin-bottom:8px;
    }
    .features-wrap{
      display:flex;
      gap:12px;
      padding:12px;
      align-items:stretch;
    }
    .features-intro{
      flex:.8;
      padding:8px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .features-grid{
      flex:1.2;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .feature-box{
      flex:1 1 calc(50% - 10px);
      min-width:220px;
      background:#fff4e7;
      padding:16px;
      transition:.35s ease;
    }
    .feature-box:hover{
      transform:scale(1.05);
    }
    .feature-box .material-icons{
      color:var(--primary);
      font-size:2rem;
      margin-bottom:8px;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:12px;
      padding:14px 14px 0 14px;
    }
    .section-head p{
      margin:0;
      max-width:58ch;
    }
    .carousel-shell{
      padding:8px 0 14px 0;
    }
    .carousel.carousel-slider{
      height:470px !important;
    }
    .carousel-item{
      width:100%;
      height:100%;
      padding:14px 54px;
    }
    .slide-card{
      height:100%;
      display:flex;
      gap:12px;
      background:#fff5ea;
      border:1px solid rgba(249,115,22,.14);
      overflow:hidden;
    }
    .slide-image{
      flex:.95;
      min-height:100%;
      background-size:cover;
      background-position:center;
      border-radius:22px;
      margin:14px;
      transition:.4s ease;
    }
    .slide-card:hover .slide-image{
      transform:scale(1.04);
    }
    .slide-content{
      flex:1.05;
      padding:18px 18px 18px 0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:10px;
    }
    .topic-tag{
      display:inline-flex;
      width:max-content;
      background:#fff0df;
      color:var(--primary);
      padding:7px 10px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.76rem;
      font-weight:700;
    }
    .slide-content h3{
      font-size:2rem;
      line-height:1;
      margin:0;
    }
    .slide-content p{
      margin:0;
      line-height:1.7;
    }
    .read-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      color:var(--primary);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:700;
      transition:.3s ease;
    }
    .read-link:hover{
      transform:scale(1.05);
    }
    .sidebar-card{
      padding:16px;
    }
    .sidebar-card h4{
      font-size:1.3rem;
      margin-bottom:10px;
    }
    .side-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .side-item{
      display:flex;
      gap:10px;
      align-items:flex-start;
      background:#fff4e8;
      padding:10px;
      transition:.35s ease;
    }
    .side-item:hover{
      transform:scale(1.04);
    }
    .side-item i{
      color:var(--primary);
      font-size:1.2rem;
      margin-top:2px;
    }
    .chip-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .topic-chip{
      padding:8px 10px;
      border:1px solid rgba(249,115,22,.18);
      background:#fff6ed;
      text-transform:uppercase;
      font-size:.74rem;
      letter-spacing:.08em;
      transition:.3s ease;
    }
    .topic-chip:hover{
      transform:scale(1.05);
      background:#ffe7cf;
    }
    .footer-rich{
      margin-top:12px;
      padding:18px 16px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .footer-col{
      flex:1 1 220px;
      min-width:220px;
    }
    .footer-col ul{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .footer-col a{
      transition:.3s ease;
    }
    .footer-col a:hover{
      color:var(--primary);
      transform:scale(1.03);
      display:inline-block;
    }
    .footer-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#fff3e4;
      padding:10px 12px;
      margin-top:8px;
    }
    .footer-note{
      width:100%;
      padding-top:8px;
      border-top:1px solid rgba(249,115,22,.14);
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    @media (min-width:993px){
      .desktop-mini-nav{display:flex}
      .hide-on-large-only{display:none!important}
    }
    @media (max-width:1100px){
      .main-layout{flex-direction:column}
      .sidebar{width:100%;flex:1}
      .hero{flex-direction:column}
      .features-wrap{flex-direction:column}
    }
    @media (max-width:768px){
      .page-shell{padding:8px}
      .hero{
        min-height:auto;
        padding:10px;
      }
      .hero-mini-row,
      .features-grid,
      .footer-rich{
        flex-direction:column;
      }
      .feature-box{
        min-width:100%;
      }
      .slide-card{
        flex-direction:column;
      }
      .slide-image{
        min-height:200px;
        margin:12px 12px 0 12px;
      }
      .slide-content{
        padding:14px;
      }
      .carousel.carousel-slider{
        height:620px !important;
      }
      .carousel-item{
        padding:10px 14px 16px 14px;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
    }