/* from FeelKontakt.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }
    .field { display:flex; flex-direction:column; gap:8px; }
    .field label { font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; color:var(--ink); }
    .field input, .field textarea {
      font-family:'Figtree',sans-serif; font-size:15px; padding: 13px 16px; border-radius:10px;
      border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    }

/* from FeelLeistungen.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }
    .check { flex-shrink:0; }

/* from FeelStart.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1.5px solid var(--ink); color: var(--ink);
      padding: 12.5px 24px; border-radius: 999px; font-weight: 600; font-size: 15px;
    }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }

/* from FeelUeberUns.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }

/* from Human3Hub.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .grain-dark::after { opacity: 0.07; mix-blend-mode: overlay; }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--ink); text-decoration: none; }

    @keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,-26px) scale(1.08); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,30px) scale(1.06); } }
    @keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.8); } }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes fadeUp { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } }

    .blob-a { animation: floatA 16s ease-in-out infinite; }
    .blob-b { animation: floatB 19s ease-in-out infinite; }
    .dot { animation: pulseDot 1.8s ease-in-out infinite; }
    .marquee-track { animation: marquee 26s linear infinite; }
    .fade-up { opacity:0; animation: fadeUp 0.9s cubic-bezier(.2,.7,.3,1) forwards; }

    .grad-text {
      background: linear-gradient(92deg, var(--talk) 0%, var(--feel) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .tile {
      --r: 0deg; --ty: 0px;
      transform: rotate(var(--r)) translateY(var(--ty));
      transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
    }
    .tile-talk { --r: -1.4deg; --ty: 0px; }
    .tile-feel { --r: 1.2deg; --ty: -16px; }
    .tile-move { --r: -0.7deg; --ty: 16px; }
    .tile-talk:hover, .tile-feel:hover {
      transform: rotate(0deg) translateY(calc(var(--ty) - 12px)) scale(1.015);
    }

/* from Kontakt.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .field { display:flex; flex-direction:column; gap:8px; }
    .field label { font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; color:var(--ink); }
    .field input, .field textarea {
      font-family:'Figtree',sans-serif; font-size:15px; padding: 13px 16px; border-radius:10px;
      border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }

/* ==========================================================================
   Responsive + full-bleed additions (added 2026-09-12)
   All rules below target the existing inline-styled markup of the 9 pages
   via structural selectors (.h3page > header/section/footer) and
   attribute substring selectors ([style*="..."]) so none of the articles'
   HTML needs to be edited. !important is required because these need to
   win over the pages' own inline style="" attributes.
   ========================================================================== */

/* ---- Full-bleed hero / ticker / CTA bands: bleed edge-to-edge regardless
   of the 1440px-max-width .h3page container or any theme padding around it.
   Only the BACKGROUND bleeds; each band keeps its own inline horizontal
   padding for its content, so the text/content column is unaffected. ---- */
.h3page [style*="background: var(--accent);"]:not(.no-bleed),
.h3page [style*="background: var(--ink);"]:not(.no-bleed) {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* ---- Mobile layout (phones / narrow tablets) ---- */
@media (max-width: 760px) {

  /* safety net: nothing on the page should ever force horizontal scroll */
  .h3page { overflow-x: hidden; }

  /* Header / nav: let it wrap instead of overflowing */
  .h3page > header {
    flex-wrap: wrap !important;
    row-gap: 14px !important;
    padding: 18px 24px !important;
  }
  .h3page > header nav {
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
    width: 100%;
  }

  /* All top-level bands: tighter side padding on narrow screens */
  .h3page > header,
  .h3page > section,
  .h3page > footer,
  .h3page > div[style*="background: var(--ink);"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Large vertical hero/CTA padding: roughly halved */
  .h3page > section[style*="padding: 76px"],
  .h3page > section[style*="padding: 80px"],
  .h3page > section[style*="padding: 88px"],
  .h3page > section[style*="padding: 96px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* 2- and 3-column grids collapse to a single column */
  [style*="grid-template-columns: repeat("] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Two-column flex rows (form+info, offering rows, team rows, footer
     link columns) stack vertically instead of squeezing side by side */
  [style*="display:flex; gap:56px"],
  [style*="display:flex; gap:64px"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Hero text columns that set their own inline max-width: use full width */
  .h3page > section[style*="max-width:680px"],
  .h3page > section[style*="max-width: 680px"],
  .h3page > section[style*="max-width: 700px"] {
    max-width: 100% !important;
  }

  /* Big serif headings: scale down so they never overflow a narrow screen */
  .h3page h1 { font-size: 30px !important; line-height: 1.25 !important; }
  .h3page h2 { font-size: 24px !important; line-height: 1.3 !important; }
}

/* from Leistungen.style.css */
.h3page, .h3page * { box-sizing: border-box; }
    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0.045; mix-blend-mode: multiply; background-size: 140px 140px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }
    .sans { font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif; }
    .h3page a { color: var(--accent); text-decoration: none; }
    .h3page a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
    .navlink { color: var(--ink); font-weight: 500; font-size: 15px; }
    .navlink:hover { color: var(--accent); }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent); color: var(--on-accent) !important;
      padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
      white-space: nowrap;
    }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: var(--on-accent) !important; }
    .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
    .check { flex-shrink:0; }
    .crumb { font-size:13px; color:var(--ink-soft); font-weight:500; }
    @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } }
    @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,20px); } }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .grad-text { background: linear-gradient(92deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .ticker-track { display:flex; align-items:center; gap:40px; white-space:nowrap; animation: marquee 26s linear infinite; width:max-content; }

/* ==========================================================================
   Native Joomla single-contact page reskin (Talk-Kontakt / Feel-Kontakt).

   Background: the intended approach was a com_contact template override
   (templates/cassiopeia_extended/html/com_contact/contact/default.php) so
   the page could keep the exact same hand-built nav/hero/footer markup as
   every other Human³ page. The hosting environment has a bug in Joomla's
   admin file manager (Joomla\Filesystem\Path::check() throws "Snooping
   out of bounds") that blocks creating ANY new subfolder under
   templates/cassiopeia_extended/html/ -- both the "Overrides erstellen"
   auto-generator and the manual "Verzeichnisse verwalten" dialog fail the
   same way, so that folder (and therefore the override file) currently
   cannot be created through the Joomla admin UI.

   Fallback used instead: the two Contact records ("Human³ Coaching" /
   Talk and "Human³ Feel") keep Joomla's own default com_contact layout
   (no override needed, so no blocked folder needed), and:
     - the contact's own "Weitere Informationen" (misc) field carries a
       real, brand-specific nav bar + hero (same copy/markup as the other
       pages, plus a small <style> block that sets --accent etc. on
       :root so this stylesheet's var() references pick up the right
       brand colors on that page) -- added via the same TinyMCE
       setContent() approach used for the articles themselves.
     - this stylesheet reskins the native .com-contact / .com-contact__*
       structure (fetched from Joomla 6.1.3's core source as ground
       truth) to read like the rest of the site: hides the default
       "Details / E-Mail-Formular / Sonstige Informationen" headings,
       restyles the form fields/button, and turns the address block into
       a simple "Direkt erreichbar" card.
     - .com-contact is flexed into a single column and the three visible
       blocks (misc nav/hero, the form, the address card) are reordered
       via `order` so the page reads: nav+hero -> form -> contact details,
       even though Joomla renders them in a different DOM order.

   If Lothar later gets FTP / hosting file-manager access, the originally
   drafted PHP override (kept at template-migration/override/default.php)
   can replace this CSS-only approach for a pixel-exact nav/footer on
   this one page; nothing here blocks that upgrade path.
   ========================================================================== */
.com-contact {
  max-width: 1440px; margin: 0 auto; padding: 0 64px 96px;
  background: var(--bg, #fff); color: var(--ink, #222);
  font-family: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
  display: flex; flex-direction: column;
}
.com-contact * { box-sizing: border-box; }
.com-contact > h1,
.com-contact > h2,
.com-contact > h3,
.com-contact .page-header { display: none; }

.com-contact__form.contact-form { order: 2; max-width: 640px; margin: 8px 0 56px; align-self: center; width: 100%; }
.com-contact__container { order: 3; max-width: 420px; align-self: center; width: 100%; }
.com-contact__container h2, .com-contact__container h3 { display: none; }

.com-contact__address {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-soft, #f6f6f6); border: 1px solid var(--line, #ddd);
  border-radius: 18px; padding: 28px 32px; margin: 0 0 40px;
  font-size: 15px; color: var(--ink-soft, #666); list-style: none;
}
.com-contact__address dt { display: none; }
.com-contact__address dd { margin: 0; }
.com-contact__address .contact-emailto,
.com-contact__address .contact-telephone { display: inline-flex; align-items: center; }
.com-contact__address .contact-emailto::before,
.com-contact__address .contact-telephone::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #999); margin-right: 10px; flex-shrink: 0;
}

.com-contact__form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.com-contact__form legend { display: none; }
.com-contact__form label {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink, #222);
  display: block; margin-bottom: 6px;
}
.com-contact__form label .star { color: var(--accent, #999); margin-left: 2px; }
.com-contact__form input[type="text"],
.com-contact__form input[type="email"],
.com-contact__form textarea {
  font-family: inherit; font-size: 15px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line, #ddd); background: var(--bg, #fff); color: var(--ink, #222);
  width: 100%; display: block;
}
.com-contact__form input[type="text"]:focus,
.com-contact__form input[type="email"]:focus,
.com-contact__form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #999) 45%, transparent); outline-offset: 1px;
}
.com-contact__form input[type="text"]::placeholder,
.com-contact__form input[type="email"]::placeholder,
.com-contact__form textarea::placeholder {
  color: var(--ink-soft, #999); opacity: 0.5;
}
.com-contact__form .control-group { margin-bottom: 0; }
.com-contact__form input[type="checkbox"] { margin-right: 8px; }
.com-contact__form button[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent, #999); color: var(--on-accent, #fff);
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; margin-top: 8px; font-family: inherit;
}
.com-contact__form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent, #999) 85%, black);
}

@media (max-width: 760px) {
  .com-contact { padding: 0 24px 64px; overflow-x: hidden; }
  .com-contact__form.contact-form,
  .com-contact__container { max-width: 100%; }
}


/* Human3 Menu module - hide legal links from top nav (they live in the footer), center the remaining menu */
.container-nav .mod-menu.nav > li.item-173,
.container-nav .mod-menu.nav > li.item-174 { display: none !important; }
.container-nav { display: flex !important; justify-content: center !important; width: 100% !important; }
.container-nav .mod-menu.nav { justify-content: center !important; flex-wrap: wrap !important; flex-grow: 0 !important; }


/* Contact form: center captcha + submit button (Talk/Feel Kontakt pages) */
.com-contact .control-group:has(altcha-widget) .controls {
  display: flex;
  justify-content: center;
}
.com-contact altcha-widget {
  width: fit-content;
}
.com-contact .controls:has(button.btn-primary.validate) {
  display: flex;
  justify-content: center;
}