/* Markenatelier: bewusst eigenständig, im Creme-/Beere-Farbsystem der Seite. */
#marken { scroll-margin-top: 96px; }
.brand-section { position: relative; background: var(--bg); }
.brand-intro { display:grid; grid-template-columns: 1.2fr 1fr; gap:60px; align-items:center; margin-bottom:40px; }
.brand-intro h2 { font-size:clamp(2rem,4vw,3.2rem); max-width:650px; }
.brand-intro h2 em { color:var(--berry); font-weight:400; }
.brand-intro p { color:var(--muted); margin-top:22px; max-width:630px; }
.brand-intro-photo { position:relative; margin:0 0 12px 18px; }
.brand-intro-photo::before { content:""; position:absolute; inset:18px -14px -14px 18px; border:1px solid var(--copper); border-radius:var(--r); }
.brand-intro-photo img { position:relative; width:100%; height:310px; object-fit:cover; border-radius:var(--r); }
.brand-intro-photo figcaption { position:absolute; bottom:16px; left:16px; right:16px; color:#fff; background:rgba(38,29,26,.85); padding:10px 15px; border-radius:8px; font-size:.8rem; line-height:1.5; }
.brand-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; border-block:1px solid var(--line); padding:28px 0; margin:38px 0; }
.brand-guide b { display:block; color:var(--heading); font-family:var(--serif); font-size:1.14rem; margin-bottom:7px; }
.brand-guide p { font-size:.9rem; color:var(--muted); line-height:1.65; }
.brand-guide .guide-number { display:block; font-size:.7rem; letter-spacing:.16em; color:var(--berry); margin-bottom:9px; font-weight:700; }
.brand-controls { display:none; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:10px; }
.brand-controls.is-ready { display:flex; }
.brand-controls button { font:600 .87rem var(--sans); color:var(--ink); background:var(--surface); border:1px solid var(--line); min-height:44px; padding:10px 18px; border-radius:30px; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.brand-controls button:hover { border-color:var(--berry); }
.brand-controls button[aria-pressed="true"] { background:var(--berry); color:#fff; border-color:var(--berry); }
[data-theme="dark"] .brand-controls button[aria-pressed="true"] { color:#1c1614; }
.brand-controls button:focus-visible,.brand-link:focus-visible,.brand-jump:focus-visible { outline:3px solid var(--copper); outline-offset:4px; }
.brand-count { color:var(--muted); font-size:.83rem; margin-bottom:22px; min-height:1.5em; }
.brand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:22px; }
.brand-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s,transform .2s; }
.brand-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px var(--shadow); }
.brand-card[hidden] { display:none; }
.brand-logo { background:#fff; height:134px; padding:25px 40px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #eee8e1; }
.brand-logo img { width:100%; max-width:226px; height:78px; object-fit:contain; }
.brand-logo--chivasso img { height:100px; }
.brand-body { padding:26px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.brand-kicker { color:var(--berry); font-size:.69rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:8px; }
.brand-body h3 { font-size:1.45rem; margin-bottom:12px; }
.brand-body>p { color:var(--muted); font-size:.91rem; line-height:1.75; }
.brand-tags { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; padding:0; list-style:none; }
.brand-tags li { font-size:.7rem; line-height:1.5; border:1px solid var(--line); background:var(--bg); padding:5px 9px; border-radius:5px; color:var(--ink); }
.brand-fit { margin:0 0 20px; border-left:2px solid var(--copper); padding-left:13px; font-size:.84rem; line-height:1.7; color:var(--muted); }
.brand-fit dt { font-weight:700; color:var(--heading); margin-bottom:4px; }
.brand-fit dd { margin:0; }
.brand-link { margin-top:auto; min-height:44px; display:inline-flex; align-items:center; gap:12px; font-size:.83rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.brand-card--special { grid-column:auto; }
.brand-group-note { color:var(--muted); font-size:.84rem; margin:26px 0; max-width:900px; }
.brand-consult { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:30px; background:var(--bg-2); border-radius:var(--r); border:1px solid var(--line); }
.brand-consult h3 { font-size:1.4rem; margin-bottom:8px; }
.brand-consult p { color:var(--muted); max-width:690px; font-size:.92rem; }
.brand-consult a { flex-shrink:0; }
.brand-disclaimer { color:var(--muted); font-size:.78rem; line-height:1.7; margin-top:20px; }
.brand-jump { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:15px; font-size:.9rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.brand-review-note { margin-top:26px; border:1px dashed var(--copper); padding:15px 18px; font-size:.83rem; color:var(--ink); background:var(--bg-2); }
@media (min-width:861px) { .menu { gap:20px; } .menu a { font-size:.9rem; } }
@media (max-width:1050px) { .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .brand-card--special:last-child { grid-column:auto; } .brand-intro { gap:35px; } }
@media (max-width:860px) { .menu:not(.open) { visibility:hidden; pointer-events:none; } .menu.open { visibility:visible; } }
@media (max-width:740px) { .brand-intro { grid-template-columns:1fr; gap:30px; } .brand-intro-photo { margin:0 14px 10px 0; } .brand-intro-photo img { height:260px; } .brand-guide { grid-template-columns:repeat(2,minmax(0,1fr)); } .brand-consult { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .brand-grid { grid-template-columns:1fr; } .brand-card--special:last-child { grid-column:auto; } .brand-body { padding:24px; } .brand-logo { height:126px; } .brand-guide { gap:20px; } .brand-controls { gap:7px; } .brand-controls button { padding:10px 13px; font-size:.8rem; } .brand-consult { padding:24px; } }
@media (prefers-reduced-motion:reduce) { .brand-card { transition:none; } .brand-card:hover { transform:none; } }