/* ==========================================================================
   HOFAL GMBH — design tokens
   "Hof" — a courtyard: rooms arranged around an open centre. The site is a
   building plan. Navigation is the plan itself; every section is a room.
   Terracotta brick ground, bottle-green ink. No white, no beige, no blue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Albert+Sans:wght@400;500;600&family=Red+Hat+Mono:wght@400;500&display=swap');

:root{
  --brick:    #c2603d;   /* page */
  --brick-dk: #a84f31;   /* recessed */
  --brick-lt: #cd6f4c;   /* raised */
  --ink:      #1e0e08;   /* text */
  --ink-sft:  #3f2014;
  --ink-dim:  #6b3522;
  --green:    #103c2f;   /* bottle green */
  --green-2:  #164a3b;
  --moss:     #b9d0a6;   /* text on green */
  --moss-dim: #7fa08c;
  --rule:     #8f3f25;

  --display: 'Unbounded', 'Arial Black', sans-serif;
  --body: 'Albert Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'Courier New', monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--brick);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:0;
}
h4{ font-family:var(--body); margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }

/* ------------------------------- plan button (fixed) -------------------- */

.planbtn{
  position:fixed; top:16px; right:16px; z-index:80;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--green); color:var(--moss); text-decoration:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 14px; border:1.5px solid var(--ink);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.planbtn.show{ opacity:1; transform:none; pointer-events:auto; }
.planbtn svg{ width:16px; height:16px; }

/* ------------------------------- entrance (hero) ------------------------ */

.entrance{ padding-block:clamp(28px,4vw,44px) clamp(48px,7vw,86px); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:26px; border-bottom:2px solid var(--ink); }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .gate{ width:40px; height:40px; flex:none; }
.brand .nm{ font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:.01em; }
.brand .co{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-dim); }
.bar .tel{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; font-size:14.5px; background:var(--ink); color:var(--brick-lt);
  padding:10px 16px; transition:background .2s;
}
.bar .tel:hover{ background:var(--green); color:var(--moss); }
@media (max-width:560px){ .bar .tel .t{ display:none; } }

.entry-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,60px); margin-top:clamp(34px,5vw,58px); align-items:center; }
@media (max-width:900px){ .entry-grid{ grid-template-columns:1fr; } }

.entrance .kick{ color:var(--green); }
.entrance h1{ font-size:clamp(34px,5.4vw,64px); margin-top:16px; }
.entrance h1 em{ font-style:normal; color:var(--green); }
.entrance .lede{ margin-top:20px; font-size:17.5px; color:var(--ink-sft); max-width:46ch; }
.entrance .how{ margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--ink-dim); }

/* ------------------------------- the plan (unique) ---------------------- */

.plan{ width:100%; aspect-ratio:1 / 1; max-width:560px; justify-self:center; }
.plan .wall{ fill:none; stroke:var(--ink); stroke-width:4; }
.plan .room{ cursor:pointer; }
.plan .room rect{ fill:var(--brick-lt); stroke:var(--ink); stroke-width:2.5; transition:fill .2s; }
.plan .room text{ font-family:var(--display); font-weight:700; font-size:15px; fill:var(--ink); pointer-events:none; }
.plan .room .no{ font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.1em; fill:var(--ink-dim); }
.plan .room:hover rect,
.plan .room:focus rect{ fill:var(--green); }
.plan .room:hover text,
.plan .room:focus text{ fill:var(--moss); }
.plan .room:focus{ outline:none; }
.plan .yard rect{ fill:var(--green); stroke:var(--ink); stroke-width:2.5; }
.plan .yard text{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--moss); }
.plan .tree{ fill:var(--moss-dim); }
.plan .door{ stroke:var(--brick); stroke-width:6; }
.plan .dim{ stroke:var(--ink-dim); stroke-width:1; stroke-dasharray:3 4; fill:none; }
.plan .dimtxt{ font-family:var(--mono); font-size:9px; fill:var(--ink-dim); }

/* ------------------------------- rooms (sections) ----------------------- */

.room-sec{ border-top:2px solid var(--ink); padding-block:clamp(48px,7vw,90px); scroll-margin-top:10px; }
.room-head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,44px); }
.room-head .tagno{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--ink); padding:5px 9px;
}
.room-head h2{ font-size:clamp(26px,3.8vw,44px); }
.room-lead{ color:var(--ink-sft); max-width:60ch; margin-top:-16px; margin-bottom:clamp(26px,4vw,40px); }

.room-sec.green{ background:var(--green); color:var(--moss); border-top-color:var(--green); }
.room-sec.green .tagno{ border-color:var(--moss); }
.room-sec.green .room-lead{ color:var(--moss-dim); }

/* services: two-column brick bond */
.bond{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink); }
.brickc{ padding:24px 24px 28px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transition:background .2s; }
.brickc:nth-child(4n+3), .brickc:nth-child(4n+4){ padding-left:40px; }
.brickc:hover{ background:var(--brick-lt); }
.brickc .n{ font-family:var(--mono); font-size:11px; color:var(--green); }
.brickc h3{ font-size:18px; margin-top:10px; }
.brickc p{ color:var(--ink-sft); font-size:15px; margin-top:8px; }
@media (max-width:760px){ .bond{ grid-template-columns:1fr; } .brickc:nth-child(n){ padding-left:24px; } }

/* sectors: tabs */
.tabs{ display:grid; grid-template-columns:260px 1fr; gap:0; border:1.5px solid var(--ink); }
.tablist{ display:flex; flex-direction:column; border-right:1.5px solid var(--ink); }
.tab{
  text-align:left; background:transparent; border:0; border-bottom:1.5px solid var(--ink);
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink);
  padding:18px 18px; cursor:pointer; transition:background .2s, color .2s;
}
.tab:last-child{ border-bottom:0; }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--brick-lt); }
.tab:hover:not([aria-selected="true"]){ background:var(--brick-lt); }
.panel{ padding:28px 30px; display:none; }
.panel.on{ display:block; }
.panel h3{ font-size:22px; }
.panel p{ color:var(--ink-sft); margin-top:12px; max-width:56ch; }
.panel ul{ margin:16px 0 0; padding-left:18px; color:var(--ink-sft); }
.panel li{ margin-bottom:6px; }
@media (max-width:760px){
  .tabs{ grid-template-columns:1fr; }
  .tablist{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1.5px solid var(--ink); }
  .tab{ border-bottom:0; border-right:1.5px solid var(--ink); white-space:nowrap; font-size:13px; padding:14px; }
}

/* process: corridor */
.corridor{ display:grid; grid-template-columns:repeat(4,1fr); border:1.5px solid var(--moss-dim); }
.bay{ padding:24px 20px 28px; border-right:1.5px solid var(--moss-dim); position:relative; }
.bay:last-child{ border-right:0; }
.bay::after{
  content:""; position:absolute; right:-7px; top:32px; width:12px; height:12px;
  background:var(--green); border-top:1.5px solid var(--moss-dim); border-right:1.5px solid var(--moss-dim);
  transform:rotate(45deg); z-index:2;
}
.bay:last-child::after{ display:none; }
.bay .n{ font-family:var(--mono); font-size:11px; color:var(--moss-dim); }
.bay h3{ font-size:19px; margin:12px 0 9px; color:var(--moss); }
.bay p{ font-size:14.5px; color:var(--moss-dim); }
@media (max-width:900px){
  .corridor{ grid-template-columns:1fr 1fr; }
  .bay:nth-child(2){ border-right:0; }
  .bay:nth-child(-n+2){ border-bottom:1.5px solid var(--moss-dim); }
  .bay::after{ display:none; }
}
@media (max-width:520px){ .corridor{ grid-template-columns:1fr; } .bay{ border-right:0; border-bottom:1.5px solid var(--moss-dim); } .bay:last-child{ border-bottom:0; } }

/* firm */
.firm{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,52px); }
.firm p{ color:var(--ink-sft); font-size:16.5px; max-width:56ch; }
.firm p + p{ margin-top:15px; }
.rules{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.rules li{ padding:16px 0; border-bottom:1.5px solid var(--ink); }
.rules h4{ font-size:15.5px; font-weight:600; display:flex; gap:10px; }
.rules h4 span{ font-family:var(--mono); font-size:11px; color:var(--green); padding-top:3px; }
.rules p{ color:var(--ink-sft); font-size:14.5px; margin-top:3px; padding-left:30px; }
@media (max-width:820px){ .firm{ grid-template-columns:1fr; } }

/* contact */
.cgrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,58px); }
.info{ border:1.5px solid var(--ink); }
.info .row{ padding:15px 18px; border-bottom:1.5px solid var(--ink); display:grid; grid-template-columns:82px 1fr; gap:12px; }
.info .row:last-child{ border-bottom:0; }
.info dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); padding-top:3px; }
.info dd{ margin:0; font-size:15.5px; }
.info a{ text-decoration:none; box-shadow:inset 0 -2px 0 var(--green); }

.form{ display:flex; flex-direction:column; gap:16px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.f input,.f select,.f textarea{
  border:1.5px solid var(--ink); background:var(--brick-lt);
  padding:11px 12px; font-size:15.5px; font-family:inherit; color:var(--ink);
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; background:var(--brick); box-shadow:inset 0 0 0 2px var(--green); }
.f textarea{ resize:vertical; min-height:96px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
@media (max-width:800px){ .cgrid{ grid-template-columns:1fr; } }
.note{ font-size:12.5px; color:var(--ink-dim); }
.ok{ display:none; padding:12px 14px; background:var(--green); color:var(--moss); font-size:14.5px; }
.ok.show{ display:block; }

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px;
  font-family:var(--display); font-weight:700; font-size:14px;
  text-decoration:none; border:1.5px solid var(--ink); cursor:pointer;
  background:var(--green); color:var(--moss); align-self:flex-start;
}
.btn:hover{ background:var(--ink); color:var(--brick-lt); }

/* ------------------------------- footer --------------------------------- */

.site-footer{ background:var(--ink); color:var(--brick-lt); padding:42px 0 24px; }
.f-top{ display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:30px; padding-bottom:28px; border-bottom:1px solid #4a2418; }
.f-brand{ font-family:var(--display); font-weight:800; font-size:19px; }
.f-tag{ margin-top:12px; color:#c98a6f; max-width:38ch; font-size:14px; }
.f-col h5{ margin:0 0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); font-weight:400; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.f-col a,.f-col li{ text-decoration:none; font-size:14px; color:#c98a6f; }
.f-col a:hover{ color:var(--brick-lt); }
.f-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font-family:var(--mono); font-size:11px; color:#a8674d; }
.f-bot a{ color:#a8674d; text-decoration:none; }
.f-bot a:hover{ color:var(--brick-lt); }
@media (max-width:800px){ .f-top{ grid-template-columns:1fr; gap:24px; } }

/* ------------------------------- legal page (Q&A) ----------------------- */

.legal-top{ padding-block:clamp(28px,4vw,44px) 0; }
.legal-hero{ padding-block:clamp(34px,5vw,62px) clamp(26px,4vw,40px); border-bottom:2px solid var(--ink); }
.legal-hero h1{ font-size:clamp(30px,4.8vw,54px); margin-top:14px; }
.legal-hero .intro{ margin-top:16px; color:var(--ink-sft); max-width:60ch; }
.legal-date{ margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); }

.qa{ padding-block:clamp(28px,4vw,48px) 70px; }
.qa details{ border-bottom:1.5px solid var(--ink); }
.qa details:first-child{ border-top:1.5px solid var(--ink); }
.qa summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:54px 1fr 24px; gap:14px; align-items:baseline;
  padding:20px 4px; font-family:var(--display); font-weight:700; font-size:clamp(16px,2vw,20px);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .q{ font-family:var(--mono); font-weight:500; font-size:11px; color:var(--green); }
.qa summary .pm{ font-family:var(--mono); font-size:18px; text-align:right; }
.qa details[open] summary .pm::before{ content:"–"; }
.qa details:not([open]) summary .pm::before{ content:"+"; }
.qa summary:hover{ color:var(--green); }
.qa .ans{ padding:0 4px 24px 72px; }
.qa .ans p{ color:var(--ink-sft); margin-bottom:12px; max-width:66ch; }
.qa .ans ul{ color:var(--ink-sft); padding-left:20px; margin:0 0 12px; max-width:66ch; }
.qa .ans li{ margin-bottom:6px; }
.qa .ans strong{ color:var(--ink); }
.qa-tools{ display:flex; gap:10px; margin-bottom:18px; }
.qa-tools button{
  background:transparent; border:1.5px solid var(--ink); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 12px; cursor:pointer;
}
.qa-tools button:hover{ background:var(--ink); color:var(--brick-lt); }
@media (max-width:620px){
  .qa summary{ grid-template-columns:40px 1fr 20px; }
  .qa .ans{ padding-left:4px; }
}