/* =========================================================================
   HoFaS Communications — Design System
   Tonalität: "Gastlichkeit trifft Technik" — Ink-Navy + Messing + Salbei-Teal
   Fraunces (Display) · Source Sans 3 (Text) · IBM Plex Mono (Labels/Zahlen)
   ========================================================================= */

:root{
  /* Farben */
  --ink:#15172b;
  --ink-soft:#2b2e4a;
  --brass:#c9a84c;
  --brass-dark:#8a6e2a;
  --teal:#2f6f62;
  --teal-soft:#e6f0ec;
  --cream:#faf7f1;
  --paper:#ffffff;
  --slate:#5c6079;
  --slate-soft:#9396a8;
  --line:#e8e3d6;
  --danger:#b3261e;
  --danger-soft:#fbeae9;
  --ok:#1f7a52;
  --ok-soft:#e8f5ee;

  /* Domänen-Badges */
  --dom-team:#2f6f62;       --dom-team-bg:#e6f0ec;
  --dom-gast:#8a6e2a;       --dom-gast-bg:#f6efd9;
  --dom-technik:#2b2e4a;    --dom-technik-bg:#e8e9f1;
  --dom-prozess:#5c6079;    --dom-prozess-bg:#eceef2;

  /* Layout */
  --maxw:1180px;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --shadow-sm:0 2px 10px rgba(21,23,43,.07);
  --shadow:0 14px 36px rgba(21,23,43,.12);
  --header-h:76px;

  /* Typo */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ padding-left:1.15em; }
li{ margin-bottom:.4em; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.18;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
strong{ font-weight:700; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Skip-Link für Tastatur/Screenreader */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 8px 0; z-index:2000; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Eyebrow / Section-Köpfe ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brass-dark);
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--brass); display:inline-block; }

.section-head{ max-width:760px; margin:0 0 2.4rem; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin:.5rem 0 .8rem; }
.section-head p{ color:var(--slate); font-size:1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Domänen-Badges (Wegweiser, kein Deko-Schmuck) ---------- */
.badge-domain{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.3em .7em; border-radius:30px;
}
.badge-domain.team{ color:var(--dom-team); background:var(--dom-team-bg); }
.badge-domain.gast{ color:var(--dom-gast); background:var(--dom-gast-bg); }
.badge-domain.technik{ color:var(--dom-technik); background:var(--dom-technik-bg); }
.badge-domain.prozess{ color:var(--dom-prozess); background:var(--dom-prozess-bg); }
.badge-domain.neu{ color:#fff; background:var(--teal); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:.78rem 1.6rem; border-radius:40px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--brass{ background:var(--brass); color:var(--ink); }
.btn--brass:hover{ background:var(--brass-dark); color:#fff; box-shadow:0 8px 20px rgba(138,110,42,.3); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:var(--ink-soft); box-shadow:0 8px 20px rgba(21,23,43,.25); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--ghost-dark{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost-dark:hover{ background:#fff; border-color:var(--brass); }
.btn--sm{ padding:.55rem 1.1rem; font-size:.85rem; }
.btn--block{ width:100%; }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  height:var(--header-h);
  background:rgba(250,247,241,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center;
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 24px rgba(21,23,43,.08); background:rgba(250,247,241,.98); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.nav__brand img{ height:38px; width:auto; }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1.12; font-family:var(--font-display); }
.nav__brand-text strong{ font-size:1.05rem; color:var(--ink); }
.nav__brand-text span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }

.nav__links{ display:flex; align-items:center; gap:.15rem; list-style:none; padding:0; margin:0; }
.nav__links a{
  display:block; padding:.55rem .9rem; border-radius:8px; text-decoration:none;
  font-size:.92rem; font-weight:600; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.nav__links a:hover{ background:rgba(21,23,43,.06); color:var(--ink); }
.nav__links a.is-active{ color:var(--brass-dark); background:var(--dom-gast-bg); }
.nav__links a.nav__cta{
  background:var(--ink); color:#fff !important; padding:.6rem 1.3rem; border-radius:40px; margin-left:.5rem;
}
.nav__links a.nav__cta:hover{ background:var(--brass-dark); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; background:none; border:1.5px solid var(--line); border-radius:9px; cursor:pointer; flex-shrink:0;
}
.hamburger span{ width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s ease, opacity .18s ease; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:999;
  background:var(--cream); padding:1.2rem 1.4rem 3rem; overflow-y:auto;
  flex-direction:column; gap:.2rem; border-top:1px solid var(--line);
}
.mobile-menu.is-visible{ display:flex; }
.mobile-menu a{
  display:block; padding:.95rem 1rem; border-radius:10px; text-decoration:none;
  font-size:1.05rem; font-weight:600; color:var(--ink);
}
.mobile-menu a:hover{ background:#fff; }
.mobile-menu .nav__cta{ background:var(--ink); color:#fff !important; text-align:center; border-radius:40px; margin-top:.6rem; }
.mobile-menu hr{ border:none; border-top:1px solid var(--line); margin:.5rem 0; }

@media (max-width:900px){
  .nav__links{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:480px){
  .nav__brand-text{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:#fff;
  padding:4.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(640px 420px at 88% -10%, rgba(201,168,76,.30), transparent 60%),
    radial-gradient(520px 420px at 105% 70%, rgba(47,111,98,.28), transparent 60%);
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
}
.hero__eyebrow{ color:var(--brass); }
.hero__eyebrow::before{ background:var(--brass); }
.hero h1{
  color:#fff; font-size:clamp(2.1rem, 4vw, 3.1rem); margin:.7rem 0 1.1rem;
}
.hero h1 em{ font-style:italic; color:var(--brass); }
.hero p.lead{ color:rgba(255,255,255,.82); font-size:1.12rem; max-width:46ch; margin-bottom:1.8rem; }
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.4rem; }

.hero__stats{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.hero__stats div strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:#fff; }
.hero__stats div span{ font-size:.82rem; color:rgba(255,255,255,.65); }

/* Signature element: gestapelte "Modul"-Karten, CSS-only, kein Stock-Foto nötig */
.hero__art{ position:relative; height:340px; }
.stack-card{
  position:absolute; width:78%; border-radius:18px; padding:1.1rem 1.3rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); box-shadow:0 18px 40px rgba(0,0,0,.28);
  font-family:var(--font-mono); font-size:.78rem; color:rgba(255,255,255,.92);
}
.stack-card .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.5em; }
.stack-card h4{ color:#fff; font-family:var(--font-body); font-size:.95rem; margin-top:.4rem; }
.stack-card-1{ top:0; left:0; z-index:3; }
.stack-card-1 .dot{ background:var(--teal); }
.stack-card-2{ top:90px; left:14%; z-index:2; }
.stack-card-2 .dot{ background:var(--brass); }
.stack-card-3{ top:185px; left:24%; z-index:1; }
.stack-card-3 .dot{ background:#fff; }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ display:none; }
}

/* Schnellzugriff-Chips direkt unter dem Hero — die geforderte Anker-Navigation */
.quicknav{ background:var(--paper); border-bottom:1px solid var(--line); }
.quicknav__inner{ display:flex; gap:.6rem; flex-wrap:wrap; padding:1.1rem 0; }
.quicknav a{
  font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.03em;
  text-decoration:none; color:var(--ink-soft); background:var(--cream);
  border:1px solid var(--line); border-radius:30px; padding:.5rem 1rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.quicknav a:hover{ background:var(--dom-gast-bg); border-color:var(--brass); color:var(--brass-dark); }

/* ---------- Sections ---------- */
.section{ padding:5rem 0; scroll-margin-top:calc(var(--header-h) + 14px); }
.section--alt{ background:#fff; }
.section--ink{ background:var(--ink); color:#fff; }
.section--ink h2,.section--ink h3{ color:#fff; }
.section--ink .section-head p{ color:rgba(255,255,255,.72); }

/* ---------- Grids & Karten ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3{ grid-template-columns:repeat(2,1fr); } .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card h3{ font-size:1.18rem; margin:.1rem 0 0; }
.card p{ color:var(--slate); font-size:.95rem; }
.card ul{ font-size:.92rem; color:var(--slate); margin:.2rem 0 0; }
.card__footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding-top:.6rem; border-top:1px solid var(--line); }
.card__price{ font-family:var(--font-mono); font-size:.86rem; color:var(--ink-soft); }
.card__price strong{ color:var(--ink); font-size:1rem; }
.card__link{ font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--brass-dark); text-decoration:none; }
.card__link:hover{ text-decoration:underline; }

/* Pillar-Intro Karten (Übersicht-Anker) */
.pillar-card{
  border-radius:var(--radius-lg); padding:2rem; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.7rem; min-height:230px; text-decoration:none;
}
.pillar-card h3{ color:#fff; font-size:1.3rem; }
.pillar-card p{ color:rgba(255,255,255,.82); font-size:.93rem; }
.pillar-card .pillar-link{ margin-top:auto; font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.4em; }
.pillar-card.team{ background:linear-gradient(155deg, var(--teal), #1f4d43); }
.pillar-card.gast{ background:linear-gradient(155deg, var(--brass-dark), #5c4a1c); }
.pillar-card.technik{ background:linear-gradient(155deg, var(--ink-soft), var(--ink)); }
.pillar-card.prozess{ background:linear-gradient(155deg, var(--slate), #3a3d52); }
.pillar-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* ---------- Tabellen / Preise ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
table{ width:100%; border-collapse:collapse; background:#fff; min-width:640px; }
thead th{ background:var(--ink); color:#fff; text-align:left; padding:.9rem 1.1rem; font-size:.85rem; font-weight:700; }
tbody td{ padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--cream); }
.table-group td{ background:var(--cream); font-family:var(--font-mono); font-weight:700; letter-spacing:.04em; font-size:.78rem; text-transform:uppercase; color:var(--brass-dark); }

.price-note{ font-size:.85rem; color:var(--slate-soft); font-style:italic; text-align:center; margin-top:1.2rem; }

/* ---------- News / Video Kacheln ---------- */
.filterbar{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter-chip{
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:30px; padding:.5rem 1.1rem; cursor:pointer; transition:all .15s ease;
}
.filter-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filter-chip:hover{ border-color:var(--brass); }
.filterbar a.filter-chip{ text-decoration:none; display:inline-block; }

/* ---------- Preisseite: Preisblöcke ---------- */
.price-block{ margin-bottom:3.6rem; scroll-margin-top:calc(var(--header-h) + 14px); }
.price-block:last-child{ margin-bottom:0; }
.price-block__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.price-block__head h2{ font-size:1.45rem; margin:0; }
.price-block__intro{ color:var(--slate); font-size:.96rem; max-width:70ch; margin-bottom:1.1rem; }
.price-unit{ font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brass-dark); background:var(--dom-gast-bg); padding:.3em .75em; border-radius:20px; white-space:nowrap; }
.price-jump{ margin-bottom:3rem; }

/* ---------- Bewerbermanagement Feature-Block ---------- */
.bewerber-feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.2rem; box-shadow:var(--shadow-sm);
}
.bewerber-feature__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-bottom:2rem;
}
.bewerber-feature__head h3{ font-size:1.4rem; margin:.4rem 0 .6rem; }
.bewerber-feature__head p{ color:var(--slate); max-width:55ch; font-size:.96rem; }

/* weitermitweiter.de Badge */
.wmw-badge{
  flex-shrink:0; min-width:200px; max-width:240px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(155deg, var(--ink-soft), var(--ink));
  border-radius:var(--radius-lg); padding:1.2rem 1.4rem; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease; gap:.2rem;
}
.wmw-badge:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.wmw-badge__label{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.wmw-badge strong{ color:var(--brass); font-family:var(--font-display); font-size:1.15rem; }
.wmw-badge__sub{ font-size:.72rem; color:rgba(255,255,255,.55); line-height:1.3; }

/* Prozess-Flow */
.bewerber-flow{
  display:flex; align-items:flex-start; gap:.4rem; flex-wrap:wrap;
  padding:1.4rem; background:var(--cream); border-radius:var(--radius);
  margin-bottom:.2rem;
}
.bewerber-flow__step{
  flex:1; min-width:130px; display:flex; flex-direction:column; gap:.3rem;
  align-items:center; text-align:center; padding:.6rem .4rem;
}
.bewerber-flow__icon{ font-size:1.4rem; line-height:1; }
.bewerber-flow__step strong{ font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.25; }
.bewerber-flow__step span{ font-size:.74rem; color:var(--slate); line-height:1.45; }
.bewerber-flow__step--end{ background:var(--dom-team-bg); border-radius:var(--radius); }
.bewerber-flow__arrow{
  font-size:1.2rem; color:var(--brass); align-self:center; flex-shrink:0; margin-top:-.4rem;
}
@media (max-width:820px){
  .bewerber-feature__head{ flex-direction:column; }
  .wmw-badge{ max-width:100%; flex-direction:row; text-align:left; gap:.8rem; }
  .wmw-badge strong{ font-size:1rem; }
  .bewerber-flow{ flex-direction:column; align-items:stretch; }
  .bewerber-flow__step{ flex-direction:row; text-align:left; align-items:flex-start; }
  .bewerber-flow__icon{ flex-shrink:0; }
  .bewerber-flow__arrow{ transform:rotate(90deg); align-self:flex-start; margin-left:.6rem; }
}

.news-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none; color:var(--ink);
}
.news-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.news-card__media{
  position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, var(--ink-soft), var(--ink));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
}
.news-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-card__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.news-card__play span{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:1.1rem;
}
.news-card__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.news-card__meta{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.72rem; color:var(--slate-soft); }
.news-card h3{ font-size:1.08rem; margin:0; }
.news-card p{ color:var(--slate); font-size:.9rem; flex:1; }
.news-card__more{ font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--brass-dark); }

.tag-pill{ font-family:var(--font-mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.25em .6em; border-radius:20px; }
.tag-pill.news{ background:var(--dom-prozess-bg); color:var(--dom-prozess); }
.tag-pill.video{ background:var(--dom-team-bg); color:var(--dom-team); }
.tag-pill.innovation{ background:var(--dom-gast-bg); color:var(--dom-gast); }

/* ---------- FAQ (native <details>, ohne JS lesbar) ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:.4rem 0; }
.faq-item summary{
  cursor:pointer; list-style:none; font-weight:700; font-size:1.02rem; padding:1rem .2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--brass-dark); transition:transform .2s ease; flex-shrink:0; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{ color:var(--slate); padding:0 .2rem 1.1rem; font-size:.95rem; }

/* ---------- Kontakt / Formular ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:2.5rem; align-items:flex-start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-sm); }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:.4rem; }
.field .req{ color:var(--danger); }
.field input,.field textarea{
  width:100%; padding:.8rem 1rem; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:.97rem; background:var(--cream); transition:border-color .15s ease, background .15s ease;
}
.field input:focus,.field textarea:focus{ border-color:var(--brass); background:#fff; outline:none; }
.field textarea{ min-height:140px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.captcha-row{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.captcha-row img{ border-radius:8px; border:1px solid var(--line); }
.hp{ position:absolute; left:-9999px; opacity:0; }
.alert{ border-radius:10px; padding:.9rem 1.1rem; font-size:.92rem; margin-bottom:1.2rem; }
.alert--err{ background:var(--danger-soft); color:var(--danger); border:1px solid #f3c8c5; }
.alert--ok{ background:var(--ok-soft); color:var(--ok); border:1px solid #bfe5d1; }

.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); margin-bottom:1.4rem; }
.info-card__title{ font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-dark); margin-bottom:1rem; }
.info-row{ display:flex; gap:.9rem; margin-bottom:1rem; }
.info-row:last-child{ margin-bottom:0; }
.info-row__icon{ width:34px; height:34px; flex-shrink:0; border-radius:9px; background:var(--cream); display:flex; align-items:center; justify-content:center; }
.info-row strong{ display:block; font-size:.9rem; }
.info-row span,.info-row a{ font-size:.9rem; color:var(--slate); text-decoration:none; }
.person{ display:flex; gap:.9rem; margin-bottom:1.1rem; }
.person:last-child{ margin-bottom:0; }
.person__av{ width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.85rem; flex-shrink:0; }
.person__name{ font-weight:700; font-size:.95rem; }
.person__role{ font-size:.82rem; color:var(--slate); }
.person__quote{ font-style:italic; font-size:.82rem; color:var(--slate-soft); margin-top:.2rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.75); padding:3.5rem 0 2rem; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.12); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.15rem; color:#fff; margin-bottom:.8rem; }
.footer-brand img{ height:34px; }
.site-footer p{ font-size:.88rem; color:rgba(255,255,255,.6); max-width:32ch; }
.footer-col h4{ color:#fff; font-size:.78rem; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col ul{ list-style:none; padding:0; }
.footer-col a{ color:rgba(255,255,255,.68); text-decoration:none; font-size:.92rem; display:block; padding:.3rem 0; }
.footer-col a:hover{ color:var(--brass); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-bottom a{ color:rgba(255,255,255,.5); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Cookie-Banner ---------- */
#cookieBanner{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:1500; background:#fff; box-shadow:0 -4px 24px rgba(21,23,43,.14); border-top:1px solid var(--line); padding:1.2rem 0; }
.cookie-inner{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cookie-inner p{ flex:1; min-width:220px; font-size:.88rem; color:var(--slate); margin:0; }
.cookie-inner a{ color:var(--brass-dark); font-weight:700; text-decoration:none; }
.cookie-btns{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- Back-to-top ---------- */
#toTop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; border:none;
  display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow);
  font-size:1.1rem;
}
#toTop.is-visible{ display:flex; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }