/*
Theme Name: asiakochen.de
Description: Kochwissen mit Themenbaum, Rezeptkategorien und responsiver Navigation.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: asiakochen
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/


:root {
  --ink: #241b17;
  --muted: #756a64;
  --line: #eadfd5;
  --paper: #fffdf9;
  --panel: #f8f2ea;
  --accent: #c74727;
  --accent-dark: #8d2e1a;
  --accent-soft: #fff2eb;
  --header-h: 70px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-geist-sans), Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.shell { min-height: 100vh; }
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: grid; grid-template-columns: 300px 1fr minmax(230px,330px); align-items: center; gap: 28px; padding: 0 3vw; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.96); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; font-weight: 760; letter-spacing: -.02em; }
.brand-icon { display: block; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 9px; object-fit: cover; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 540; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: var(--accent); color: white; font-family: Georgia, serif; font-size: 20px; box-shadow: 0 7px 18px rgba(199,71,39,.2); }
.top-links { display: flex; justify-content: center; gap: 26px; color: var(--muted); font-size: 13px; font-weight: 610; }
.top-links a:hover { color: var(--accent); }
.search-trigger { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; text-align: left; }
.search-trigger:hover { border-color: #d4b7a9; box-shadow: 0 5px 18px rgba(74,46,33,.06); }
.search-trigger kbd { padding: 3px 6px; border: 1px solid #dfd3ca; border-radius: 5px; background: var(--panel); font-size: 10px; }
.mobile-menu { display: none; font-size: 24px; }

.sidebar { position: fixed; inset: var(--header-h) auto 0 0; width: 292px; overflow-y: auto; padding: 34px 24px 70px 3vw; border-right: 1px solid var(--line); background: #fffaf5; }
.nav-tree { display: grid; gap: 28px; }
.nav-tree section { display: grid; gap: 7px; }
.nav-tree section > p { margin: 0 0 3px; color: var(--accent-dark); font-size: 12px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.nav-bucket { display: grid; gap: 2px; }
.nav-bucket > span { margin: 8px 0 4px; padding-left: 10px; color: #9a8c83; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.nav-bucket a { padding: 7px 10px; border-radius: 7px; color: #665b55; font-size: 13px; line-height: 1.35; }
.nav-bucket a:hover { background: #f4e9df; color: var(--ink); }
.nav-bucket a.active { background: #f2dfd3; color: var(--accent-dark); font-weight: 690; box-shadow: inset 3px 0 var(--accent); }
.nav-item-row { display: flex; align-items: stretch; min-width: 0; }
.nav-item-row > a { flex: 1 1 auto; min-width: 0; }
.nav-toggle { display: grid; flex: 0 0 30px; place-items: center; margin: 3px 0; border: 0; border-radius: 6px; background: transparent; color: #8a756a; cursor: pointer; }
.nav-toggle:hover { background: #f4e9df; color: var(--accent-dark); }
.nav-toggle span { display: block; font-size: 22px; line-height: 1; transition: transform .16s ease; }
.nav-toggle.is-open span { transform: rotate(90deg); }
.nav-children { margin: 1px 0 7px 11px; border-left: 1px solid var(--line); padding-left: 7px; }
.nav-children .nav-item-row > a { font-size: 12px; }
.chapter-return { margin: 22px 0; font-size: 16px; }
.chapter-return a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.chapter-index { margin: 28px 0; }
.sidebar { z-index: 20; }
.on-page { z-index: 20; }

.content { width: min(780px, calc(100vw - 660px)); margin-left: max(340px, calc((100vw - 1200px)/2 + 292px)); padding: calc(var(--header-h) + 54px) 0 90px; }
.crumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; color: #978a82; font-size: 12px; }
.crumb a { color: var(--accent); font-weight: 650; }

.doc-article header { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.doc-article h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px,5vw,58px); font-weight: 650; line-height: 1.05; letter-spacing: -.04em; }
.doc-article h2 { margin: 58px 0 18px; padding-top: 3px; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; line-height: 1.2; letter-spacing: -.025em; }
.doc-article h3 { margin: 36px 0 13px; font-size: 21px; line-height: 1.35; letter-spacing: -.015em; }
.doc-article h4 { margin: 26px 0 10px; font-size: 17px; line-height: 1.4; }
.doc-article p, .doc-article li { color: #4c413b; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.78; }
.doc-article p { margin: 13px 0; }
.doc-article header + p { margin-top: 28px; color: #40352f; font-size: 20px; line-height: 1.72; }
.doc-article ul, .doc-article ol { margin: 14px 0 22px; padding-left: 28px; }
.doc-article li { margin: 7px 0; padding-left: 4px; }
.doc-article li::marker { color: var(--accent); font-family: var(--font-geist-sans); font-weight: 700; }
.doc-article strong { color: #2b211d; font-family: var(--font-geist-sans); font-size: .95em; font-weight: 710; }
.doc-article em { color: var(--accent-dark); }
.doc-article a { color: var(--accent-dark); text-decoration: underline; text-decoration-color: #e0a38f; text-underline-offset: 3px; }
.doc-article hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
.doc-article blockquote { margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); }
.doc-article blockquote p { margin: 0; }
.doc-article table { display: block; width: 100%; margin: 24px 0 32px; overflow-x: auto; border-collapse: collapse; border: 1px solid var(--line); border-radius: 10px; }
.doc-article th, .doc-article td { min-width: 145px; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-article th { background: var(--panel); color: var(--accent-dark); font-size: 13px; font-weight: 720; }
.doc-article td { color: #51443e; font-family: Georgia, serif; font-size: 15px; line-height: 1.55; }
.doc-article code { padding: 2px 5px; border-radius: 4px; background: var(--panel); font-family: var(--font-geist-mono); font-size: .9em; }
.doc-article pre { max-width: 100%; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-article pre code { padding: 0; white-space: inherit; overflow-wrap: inherit; }
.doc-article h1, .doc-article h2, .doc-article h3, .chapter-return a { overflow-wrap: anywhere; }
.doc-article img { max-width: 100%; height: auto; border-radius: 12px; }
.recipe-photo-slot { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 28px; border: 1px dashed #cdbeb3; border-radius: 14px; background: #f3ece5; color: #76675d; }
.recipe-photo-slot figcaption { font-size: 13px; font-weight: 650; letter-spacing: .03em; }
.recipe-article > h3:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.recipe-ingredients { margin: 28px 0 38px; padding: 22px 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff9f3; }
.doc-article .recipe-ingredients h2, .doc-article .recipe-steps-heading { margin: 0 0 16px; padding: 0; font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 22px; letter-spacing: -.02em; }
.doc-article .recipe-ingredients ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding-left: 22px; }
.recipe-article ol { counter-reset: recipe-step; display: grid; gap: 12px; margin: 18px 0 32px; padding: 0; list-style: none; }
.recipe-article ol > li { counter-increment: recipe-step; position: relative; min-height: 48px; margin: 0; padding: 12px 15px 12px 55px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.recipe-article ol > li::before { content: counter(recipe-step); position: absolute; top: 11px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; font: 700 13px/1 var(--font-geist-sans), Arial, sans-serif; }
.recipe-article p:has(> strong:first-child) { padding: 10px 14px; border-radius: 8px; background: var(--panel); font-size: 15px; }

.on-page { position: fixed; top: calc(var(--header-h) + 44px); right: 3vw; width: 210px; max-height: calc(100vh - 130px); overflow-y: auto; padding-left: 17px; border-left: 1px solid var(--line); }
.on-page > p { margin: 0 0 12px; color: var(--ink); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.on-page a, .on-page > span { display: block; padding: 4px 0; color: #877b74; font-size: 12px; line-height: 1.45; }
.on-page a:hover { color: var(--accent); }
.on-page .toc-h3 { padding-left: 10px; }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-nav a { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.article-nav a:last-child { text-align: right; }
.article-nav a:hover { border-color: #d9b5a5; box-shadow: 0 10px 28px rgba(73,44,31,.07); }
.article-nav span { color: #9a8d84; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.article-nav strong { font-size: 14px; line-height: 1.4; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 20px 0; color: #8b7e76; font-size: 12px; }
.site-footer a { color: var(--accent-dark); font-weight: 650; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: min(13vh,130px) 18px 30px; background: rgba(36,27,23,.5); backdrop-filter: blur(4px); }
.search-box { width: min(690px,100%); overflow: hidden; border: 1px solid #e4d4c9; border-radius: 16px; background: var(--paper); box-shadow: 0 28px 80px rgba(31,20,15,.24); }
.search-input { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.search-input input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 17px; }
.search-input button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 11px; }
.results { max-height: 58vh; overflow-y: auto; padding: 10px; }
.results-label { margin: 7px 9px 9px; color: #9a8c83; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.results a { display: grid; grid-template-columns: 135px 1fr; gap: 4px 13px; padding: 13px 14px; border-radius: 10px; }
.results a:hover { background: var(--panel); }
.results a > span { grid-row: 1 / 3; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.results strong { font-size: 15px; }
.results small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.empty-result { padding: 30px; color: var(--muted); text-align: center; }
.mobile-drawer { display: none; }

@media (max-width: 1200px) {
  .topbar { grid-template-columns: 270px 1fr minmax(210px,290px); }
  .top-links a:first-child { display: none; }
  .content { width: min(720px, calc(100vw - 390px)); margin-left: 330px; padding-right: 24px; }
  .on-page { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .topbar { grid-template-columns: 1fr minmax(170px,260px) auto; gap: 14px; padding: 0 18px; }
  .top-links { display: none; }
  .brand em { display: none; }
  .sidebar { display: none; }
  .mobile-menu { display: block; }
  .content { width: min(720px,100%); margin: 0 auto; padding: calc(var(--header-h) + 38px) 22px 70px; }
  .mobile-drawer { position: fixed; inset: 0 auto 0 0; z-index: 90; display: block; width: min(360px,90vw); overflow-y: auto; padding: 22px; background: var(--paper); box-shadow: 15px 0 45px rgba(36,27,23,.2); transform: translateX(-110%); transition: transform .25s ease; }
  .mobile-drawer:target { transform: translateX(0); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
  .drawer-head a { font-size: 28px; }
}

@media (max-width: 560px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .brand > span:last-child { font-size: 14px; }
  .search-trigger { display: flex; width: 40px; justify-content: center; padding: 0; }
  .search-trigger span:nth-child(2), .search-trigger kbd { display: none; }
  .doc-article h1 { font-size: 38px; }
  .doc-article h2 { margin-top: 48px; font-size: 27px; }
  .doc-article h3 { font-size: 19px; }
  .doc-article p, .doc-article li { font-size: 16px; line-height: 1.72; }
  .doc-article header + p { font-size: 18px; }
  .recipe-photo-slot { margin-bottom: 22px; }
  .doc-article .recipe-ingredients ul { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav a:last-child { text-align: left; }
  .site-footer { flex-direction: column; }
  .results a { grid-template-columns: 1fr; }
  .results a > span { grid-row: auto; }
}

:root{--font-geist-sans:Arial,sans-serif;--font-geist-mono:monospace;}
[hidden]{display:none!important}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-search{display:flex;min-width:0;border:1px solid var(--line);border-radius:9px;background:white;overflow:hidden}.site-search input[type=search]{width:100%;min-width:0;padding:9px;border:0;background:transparent}.site-search button{border:0;background:transparent;padding:0 10px;cursor:pointer}.recipe-photo-slot img{width:100%;height:100%;object-fit:cover}.admin-bar .topbar{top:32px}.admin-bar .sidebar{top:calc(var(--header-h) + 32px)}@media(max-width:782px){.admin-bar .topbar{top:46px}}@media(max-width:560px){.topbar{grid-template-columns:minmax(100px,1fr) minmax(90px,135px) auto;gap:9px}}