*{box-sizing:border-box}body{margin:0;background:#2b160a;color:#f5e4c8;font-family:Georgia,serif}header{text-align:center;padding:20px 12px}h1{margin:0;font-size:clamp(23px,3vw,36px)}header p{margin:8px;color:#d9ae74}main{max-width:2300px;margin:auto}.board-wrap{overflow-x:auto;margin:0 auto 20px}.board{position:relative;width:100%;min-width:960px;max-width:2172px;margin:auto;aspect-ratio:2172/724}.background{width:100%;display:block}.layers{position:absolute;inset:0}.slot,.name,.pct,.hat-patch,.track{position:absolute}.slot,.name{display:flex;align-items:center;justify-content:center;font-weight:700;color:#341908;line-height:1;font-size:clamp(16px,1.85vw,38px)}.name{font-size:clamp(20px,2.25vw,48px);color:#2b1308;text-shadow:0 1px 1px #eab77f}.delta{font-size:clamp(14px,1.5vw,32px)}.delta.up{color:#07851e}.delta.down{color:#c41416}.hat-patch{pointer-events:none}.track{overflow:hidden;border-radius:100px;padding:0.36% 0.35%;}.fill{height:100%;width:0;background:linear-gradient(180deg,#fff4aa 0%,#ffe348 20%,#f5b900 60%,#c27c00 100%);box-shadow:inset 0 2px 3px #fff9bd,0 0 5px #edb700;border-radius:100px;transition:width .25s}.pct{display:flex;align-items:center;justify-content:center;color:#fff4db;font:bold clamp(15px,1.8vw,34px) Georgia,serif;text-shadow:1px 2px 3px #2b1206;pointer-events:none}
:root{--gold:#d6a455;--cream:#f5e4c8} .site-header{background:linear-gradient(#482814,#2c160a);border-bottom:2px solid #96672f;position:relative;z-index:3} .site-header .top{max-width:1250px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px}.brand{font-size:clamp(22px,3vw,33px);color:#ffe5ac;text-decoration:none;font-weight:bold}.brand small{display:block;font-size:13px;font-weight:normal;color:#d7af77}.nav{display:flex;gap:8px;flex-wrap:wrap}.nav a{color:#f9e4c2;text-decoration:none;padding:10px 12px;border-radius:6px}.nav a:hover,.nav a.active{background:#6b4120;color:#ffe8a4} .container{max-width:1200px;margin:auto;padding:28px 22px 60px}.hero{background:linear-gradient(120deg,#59331b,#2b160a);border:1px solid #93612d;border-radius:18px;padding:45px 35px;margin-bottom:28px}.hero h1{font-size:clamp(30px,5vw,54px);margin:0 0 14px}.hero p{font-size:20px;line-height:1.55;max-width:770px}.button{display:inline-block;text-decoration:none;background:var(--gold);color:#281306;font-weight:bold;padding:13px 22px;border-radius:8px;margin:8px 8px 0 0}.button.alt{background:transparent;color:#f4d6a0;border:1px solid #b4884b}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:20px}.card{border:1px solid #81572e;border-radius:14px;background:#422613;padding:24px}.card h2,.card h3{color:#ffe1a2;margin-top:0}.card p,.prose p{line-height:1.65}.section-title{font-size:32px;color:#ffe1a2}.note{background:#49301d;border-left:4px solid #d5a34d;padding:15px 20px;border-radius:5px;margin:20px 0}.footer{text-align:center;border-top:1px solid #78522f;padding:28px;color:#d9b78b}.board-area{max-width:2172px;margin:0 auto;padding:20px 12px}.board-heading{text-align:center;padding:15px}.board-heading h1{margin:0 0 10px}.muted{color:#e3c69c}.admin{max-width:1000px;margin:30px auto;padding:25px;background:#3c2413;border:1px solid #a67837;border-radius:14px}.admin fieldset{display:inline-block;vertical-align:top;margin:8px;padding:16px;border:1px solid #a67837;border-radius:10px;min-width:235px}.admin label{display:flex;justify-content:space-between;gap:12px;margin:10px 0}.admin input{max-width:130px;padding:6px;font-size:16px}.admin button,.admin .upload{background:#d5a34d;border:0;border-radius:7px;padding:11px 14px;color:#2c1609;font:bold 15px Georgia;cursor:pointer;margin:6px}.admin input[type=file]{max-width:210px}.admin .actions{margin-top:16px}.admin legend{font-weight:bold}.admin .small{font-size:14px;color:#e3c69c}.info-form label{display:block;margin:12px 0}.info-form input,.info-form textarea{width:100%;padding:12px;border-radius:7px;border:1px solid #9b7341;background:#fff8e9;color:#251507;font-size:16px}.info-form textarea{min-height:110px}.info-form button{cursor:pointer;border:0}.tag{display:inline-block;border-radius:20px;background:#6e4a28;padding:5px 12px;color:#fbe5b8}.board-wrap{scrollbar-color:#ac824c #2b160a}@media(max-width:700px){.site-header .top{display:block}.nav{margin-top:15px}.nav a{padding:8px}.hero{padding:28px 22px}}

.beoordeling{max-width:1100px}.beoordeling .intro{padding:10px 0 24px}.beoordeling .intro p{max-width:860px;font-size:19px;line-height:1.65}.beoordeling .card{margin-bottom:22px}.beoordeling ul{padding-left:24px;line-height:1.75}.beoordeling li{margin-bottom:9px}.beoordeling .two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.beoordeling .method-note{font-size:14px;color:#dfc29a}.beoordeling .hat-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.beoordeling .hat-rules div{border:1px solid #9a713b;background:#56351d;border-radius:10px;padding:14px;text-align:center}.beoordeling .hat-rules strong,.beoordeling .hat-rules span{display:block}.beoordeling .hat-rules span{margin-top:5px;color:#f2d5a6}@media(max-width:750px){.beoordeling .two-col{grid-template-columns:1fr}.beoordeling .hat-rules{grid-template-columns:repeat(2,1fr)}}

/* Hoofdmenu: dezelfde inhoudsbreedte als .container, zonder afsnijden. */
.site-header .top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 19px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
}
.site-header .brand .brand-brood {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
  transform: scale(1.18);
  transform-origin: center;
}
.site-header .brand .brand-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site-header .brand .brand-naam {
  display: block;
  white-space: nowrap;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.15;
}
.site-header .brand small {
  display: block;
  white-space: nowrap;
  line-height: 1.4;
}
.site-header .nav {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
}
.site-header .nav a {
  white-space: nowrap;
  padding: 10px 6px;
  font-size: 14px;
}
/* Op smallere schermen liever een tweede regel dan verborgen links. */
@media (max-width: 1180px) {
  .site-header .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-header .nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0;
  }
}
@media (max-width: 560px) {
  .site-header .brand .brand-naam {font-size: clamp(19px, 5vw, 27px); white-space: normal;}
  .site-header .brand small {white-space: normal; font-size: 11px;}
  .site-header .brand .brand-brood {width: 42px; height: 42px;}
}

/* Compacte oventjesteller voor het laatst gebakken brood. */
.oventeller{display:inline-flex;align-items:center;gap:8px;color:#ffda72;font-size:17px;white-space:nowrap}
.oventeller-icoon{font-size:23px;line-height:1}
.oventeller strong{font-weight:700}
.oventeller-home{margin:14px 0 2px;color:#f5e4c8;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.oventeller-bakker{margin:9px 0 14px}

/* Uniforme tweeregelige navigatie voor alle pagina’s. */
.site-header .top{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;max-width:1200px;margin:auto;padding:19px 22px}
.site-header .brand{flex:0 1 auto;max-width:100%}
.site-header .nav{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px;min-width:0;margin:0}
.site-header .nav a{white-space:nowrap;padding:10px 6px;font-size:14px}
@media(max-width:560px){.site-header .top{padding:14px 16px}.site-header .nav{gap:1px}}

/* Bovenbalk identiek aan de homepage, op iedere pagina. */
.site-header .top{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;max-width:1200px;margin:auto;padding:19px 22px}
.site-header .brand{display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;max-width:100%}
.site-header .brand .brand-aar{display:block;width:36px;height:49px;object-fit:contain;flex:none}
.site-header .brand .brand-aar-rechts{transform:scaleX(-1)}
.site-header .brand .brand-tekst{text-align:center}
.site-header .brand .brand-naam{font-size:26px;white-space:nowrap}
.site-header .brand small{font-size:10px;white-space:nowrap}
.site-header .nav{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px;min-width:0;margin:0;font-size:14px}
.site-header .nav a{white-space:nowrap;padding:10px 6px;font-size:14px}
@media(max-width:700px){.site-header .brand .brand-aar{width:28px;height:40px}.site-header .brand .brand-naam{font-size:clamp(18px,4vw,25px)}.site-header .brand small{white-space:normal}}