/* Bob Haus und Hof — Schriften lokal eingebunden (SIL Open Font License), keine externen Aufrufe */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}

  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img { max-width: 100%; }
  [hidden] { display: none !important; }

  :root {
    --ground:   #F4F1EC;
    --surface:  #FFFFFF;
    --ink:      #23262A;
    --ink-soft: #55524D;
    --forest:   #3A4A3F;
    --forest-d: #2D3A31;
    --on-dark:  #F4F1EC;
    --on-dark-soft: #B3BDB4;
    --brick:    #9C5B3C;
    --sand:     #D9D2C6;
    --hair:     #E3DED5;
    --mark:     #3A4A3F;

    --sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    --wrap: 1080px;
    --gut: clamp(20px, 5vw, 48px);
    --sec: clamp(56px, 9vw, 104px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:   #1A1F1B;
      --surface:  #232A25;
      --ink:      #EDEAE3;
      --ink-soft: #A8AFA6;
      --forest:   #2A332C;
      --forest-d: #222A24;
      --on-dark:  #EDEAE3;
      --on-dark-soft: #9FAAA1;
      --brick:    #CF8F62;
      --sand:     #3B463D;
      --hair:     #333D35;
      --mark:     #EDEAE3;
    }
  }
  :root[data-theme="dark"] {
    --ground:   #1A1F1B;
    --surface:  #232A25;
    --ink:      #EDEAE3;
    --ink-soft: #A8AFA6;
    --forest:   #2A332C;
    --forest-d: #222A24;
    --on-dark:  #EDEAE3;
    --on-dark-soft: #9FAAA1;
    --brick:    #CF8F62;
    --sand:     #3B463D;
    --hair:     #333D35;
    --mark:     #EDEAE3;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  a { color: var(--brick); }
  a:hover { color: var(--ink); }
  :focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

  h1, h2, h3 { font-family: var(--sans); font-weight: 500; text-wrap: balance; margin: 0; }

  .eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
  }

  /* ---------------------------------------------------------- Kopfzeile */
  .topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: var(--ground);
    border-bottom: 1px solid var(--hair);
  }
  .topbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 14px;
  }
  .mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .mark svg { display: block; flex: none; }
  .mark-text { font-family: var(--sans); line-height: 1; }
  .mark-name {
    font-size: 1.15rem; font-weight: 500; letter-spacing: 0.13em; color: var(--mark);
  }
  .mark-sub {
    font-size: 0.5rem; letter-spacing: 0.3em; color: var(--ink-soft); margin-top: 5px;
  }
  .topnav {
    margin-left: auto;
    display: flex; gap: clamp(14px, 3vw, 28px); flex-wrap: wrap;
    font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.04em;
  }
  .topnav a { color: var(--ink); text-decoration: none; padding-block: 4px; }
  .topnav a:hover { color: var(--brick); }

  /* --------------------------------------------------------------- Hero */
  .hero {
    background: var(--forest);
    color: var(--on-dark);
    padding-block: clamp(52px, 8vw, 92px);
  }
  :root:not([data-theme="light"]) .hero,
  :root[data-theme="dark"] .hero { border-block: 1px solid var(--hair); }

  .hero .eyebrow { color: var(--on-dark-soft); }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(34px, 5vw, 56px);
    align-items: center;
  }
  @media (min-width: 880px) {
    .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); }
    .hero-text  { order: 1; }
    .hero-plate { order: 2; }
  }

  /* Das Schild trägt die Markenfarben und bleibt deshalb in beiden
     Themes hell — wie ein gedrucktes Schild an der Wand. */
  .hero-plate {
    background: #F4F1EC;
    padding: clamp(30px, 4vw, 48px) clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 28px);
  }
  .hero-plate svg { display: block; }
  .hp-name {
    font-family: var(--sans);
    font-size: clamp(2.1rem, 5.4vw, 2.9rem);
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1;
    color: #3A4A3F;
  }
  .hp-sub {
    font-family: var(--sans);
    font-size: clamp(0.58rem, 1.5vw, 0.78rem);
    font-weight: 400;
    letter-spacing: 0.33em;
    line-height: 1;
    color: #3A4A3F;
    margin-top: 10px;
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-block: 18px 0;
    max-width: 17ch;
  }
  .hero p.lead {
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    color: var(--on-dark);
    opacity: 0.88;
    max-width: 52ch;
    margin-block: 22px 0;
  }
  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .btn {
    font-family: var(--sans);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    padding: 14px 26px;
    min-height: 48px;
    display: inline-flex; align-items: center;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn-solid { background: var(--brick); color: #FFFFFF; }
  .btn-solid:hover { background: #7E4529; color: #FFFFFF; }
  .btn-ghost { border-color: var(--on-dark-soft); color: var(--on-dark); }
  .btn-ghost:hover { background: var(--on-dark); color: var(--forest); }

  /* --------------------------------------------------------- Jahreslauf */
  .jahr { padding-block: var(--sec); }
  .jahr-head { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
  .jahr-head h2 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }
  .jahr-note { color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch; margin: 0; }

  .chart { margin-top: 32px; }
  .chart-months {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hair);
  }
  .chart-months span { text-align: center; }
  .track {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--hair);
  }
  .bar {
    grid-row: 1;
    height: 22px;
    display: flex;
    align-items: center;
    padding-inline: 10px;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
  }
  .bar-forest { background: var(--forest); }
  :root:not([data-theme="light"]) .bar-forest,
  :root[data-theme="dark"] .bar-forest { background: #4E6355; }
  .bar-brick { background: var(--brick); }
  .bar-sand {
    background: var(--sand);
    color: var(--ink);
  }
  .chart-legend {
    margin-top: 14px; color: var(--ink-soft); font-size: 0.86rem;
  }

  /* ------------------------------------------------------- Zwei Wege */
  .paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
  }
  .path { background: var(--surface); padding: clamp(28px, 4vw, 40px); }
  .path h3 { font-size: 1.3rem; margin-bottom: 10px; }
  .path p { color: var(--ink-soft); margin: 0 0 18px; }
  .path ul { margin: 0; padding-left: 1.1em; color: var(--ink); }
  .path li { margin-bottom: 6px; }

  /* -------------------------------------------------------- Leistungen */
  .sec { padding-block: var(--sec); }
  .sec > .wrap > h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-block: 10px 0; }
  .sec-intro { color: var(--ink-soft); max-width: 54ch; margin-block: 14px 0; }

  .grid-4 {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(20px, 3vw, 32px);
  }
  .tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--sand);
    padding: 28px 26px 32px;
  }
  /* Die Lücke unten links zitiert die Toreinfahrt im Signet. */
  .tile::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -1px;
    width: 54px;
    height: 2px;
    background: var(--surface);
  }
  .tile h3 {
    font-size: 1.12rem;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    color: var(--forest);
  }
  :root:not([data-theme="light"]) .tile h3,
  :root[data-theme="dark"] .tile h3 { color: var(--ink); }
  .tile ul {
    margin: 0; padding: 0; list-style: none;
    color: var(--ink-soft); font-size: 0.97rem;
  }
  .tile li { padding-block: 5px; }
  .tile li + li { border-top: 1px solid var(--hair); }
  .tile-num {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--brick);
  }

  /* ------------------------------------------------------------ Gebiet */
  .band { background: var(--surface); border-block: 1px solid var(--hair); }
  .gebiet { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 4vw, 56px); }
  .orte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
  .orte li {
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border: 1px solid var(--sand);
    padding: 6px 13px;
    color: var(--ink);
  }

  /* --------------------------------------------------------- Steuertipp */
  .hinweis {
    border-left: 3px solid var(--brick);
    background: var(--surface);
    padding: clamp(24px, 3.5vw, 34px);
    max-width: 62ch;
  }
  .hinweis h3 { font-size: 1.1rem; color: var(--brick); margin-bottom: 10px; }
  .hinweis p { margin: 0; color: var(--ink-soft); }

  /* ------------------------------------------------------------ Kontakt */
  .kontakt { background: var(--forest); color: var(--on-dark); padding-block: var(--sec); }
  .kontakt .eyebrow { color: var(--on-dark-soft); }
  .kontakt h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin-block: 12px 0; }
  .kontakt p.lead { color: var(--on-dark); opacity: .85; max-width: 48ch; margin-block: 16px 0; }
  .kdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 40px; }
  .kdaten dt {
    font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 8px;
  }
  .kdaten dd { margin: 0; font-family: var(--sans); font-size: 1.32rem; letter-spacing: 0.01em; }
  .kdaten dd a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--on-dark-soft); }
  .kdaten dd a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
  

  /* ------------------------------------------------------------- Fusszeile */
  .foot { background: var(--forest-d); color: var(--on-dark-soft); padding-block: clamp(40px, 6vw, 64px); font-size: 0.9rem; }
  .foot h3 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 12px; }
  .foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(28px, 4vw, 48px); }
  .foot p { margin: 0 0 10px; line-height: 1.6; }
  .foot a { color: var(--on-dark); }
  .foot-base {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 0.8rem;
    display: flex; flex-wrap: wrap; gap: 8px 28px;
  }

  .entwurf {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    border: 1px dashed var(--sand);
    padding: 12px 16px;
    margin-top: 28px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

/* ------------------------------------------------------ Rechtstexte */
.legal { padding-block: clamp(48px, 7vw, 88px); }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-block: 10px 28px; }
.legal h2 { font-size: 1.2rem; margin-block: 40px 10px; color: var(--forest); }
:root:not([data-theme="light"]) .legal h2, :root[data-theme="dark"] .legal h2 { color: var(--ink); }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.2em; }
.legal .stand { color: var(--ink-soft); font-size: 0.9rem; margin-top: 48px; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.kdaten dd.small { font-size: 1.05rem; line-height: 1.5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legal h2 { color: var(--ink); } }