@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman");
  size-adjust: 109.01%;
  ascent-override: 89.72%;
  descent-override: 23.39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 106.77%;
  ascent-override: 90.73%;
  descent-override: 22.59%;
  line-gap-override: 0%;
}

@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* CI gutstein. (HEX in Kommentar) */
    --ink: oklch(28.1% 0.041 254.8);          /* #1B2A3D */
    --paper: oklch(95.4% 0.011 95.2);         /* #F2F0E8 */
    --white: oklch(100% 0 0);                 /* #FFFFFF */
    --gold: oklch(66.5% 0.118 80.4);          /* #B98B32 – nur auf Ink */
    --gold-strong: oklch(53.4% 0.094 82.2);   /* #876622 – Gold dunkel, auf 4,5:1 abgedunkelt */
    --petrol: oklch(49.1% 0.078 180.8);       /* #1F6F63 */
    --petrol-strong: oklch(38.8% 0.061 180.6); /* #154F46 – Petrol dunkel */
    --text: oklch(26.8% 0.01 260.7);          /* #23262B */
    --muted: oklch(53.4% 0.01 128.7);         /* #6B6E68 */
    --line: oklch(87.4% 0.017 88);            /* #DAD5C9 */
    --ink-grey: oklch(75.5% 0.019 261.3);     /* #A9B0BC */
    --ink-line: oklch(40% 0.035 255);         /* Linie auf Ink */
    --todo: oklch(92% 0.12 95);               /* Markierung offener Punkte */
    --alert: oklch(46% 0.15 28);              /* #A0302A – nur Fehlerrahmen im Formular */

    /* semantisch; Abschnitte mit dunklem Grund überschreiben diese Werte */
    --c-text: var(--text);
    --c-head: var(--ink);
    --c-bg: var(--paper);
    --c-surface: var(--white);
    --c-accent: var(--gold-strong);
    --c-accent-contrast: var(--white);
    --c-muted: var(--muted);
    --c-line: var(--line);
    --c-focus: var(--ink);
    --c-mark: var(--gold);                    /* Markierung der aktuellen Seite in der Navigation */

    --ff-body: "Inter", "Inter Fallback", sans-serif;
    --ff-head: "Fraunces", "Fraunces Fallback", serif;

    /* fluide Skala: 360 px → 1280 px */
    --fs-0: 0.75rem;
    --fs-1: 1rem;
    --fs-2: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
    --fs-3: clamp(1.375rem, 1.2283rem + 0.6522vw, 1.75rem);
    --fs-4: clamp(1.75rem, 1.3587rem + 1.7391vw, 2.75rem);
    --fs-5: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem);

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2.5rem;
    --s-6: 4rem;
    --s-section: clamp(3.5rem, 2.3261rem + 5.2174vw, 7rem);

    --radius: 0.875rem;
    --radius-tag: 0.375rem;
    --measure: 65ch;
    --wrap: 74rem;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    hanging-punctuation: first last;
  }
  body { min-block-size: 100dvh; line-height: 1.6; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  [hidden] { display: none; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, li, dd, figcaption { overflow-wrap: break-word; hyphens: auto; }
  h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; line-height: 1.15; }
  p { text-wrap: pretty; }
  :target { scroll-margin-block-start: var(--s-5); }
}

@layer base {
  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: var(--fs-1);
  }
  h1, h2, h3 {
    color: var(--c-head);
    font-family: var(--ff-head);
    font-weight: 500;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
  }
  h1 { font-size: var(--fs-5); line-height: 1.05; }
  h2 { font-size: var(--fs-4); }
  h3 { font-size: var(--fs-3); }
  p, ul, ol, dl, address { max-inline-size: var(--measure); }
  address { font-style: normal; }
  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    &:hover { text-decoration-thickness: 2px; }
  }
  svg use { pointer-events: none; }
  :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
  /* Naio-Welt: Petrol statt Gold, auf der ganzen Seite (body) oder einzeln (Button, Eyebrow) */
  [data-world="naio"] {
    --c-accent: var(--petrol);
    --c-focus: var(--petrol);
    --c-mark: var(--petrol);
  }
  mark[data-todo] { background: var(--todo); color: var(--text); padding-inline: var(--s-1); outline: 2px dashed currentColor; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    @view-transition { navigation: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--s-4), var(--wrap));
    margin-inline: auto;
  }
  .site-head {
    border-block-end: 1px solid var(--c-line);
    & > .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-4);
      min-block-size: 4rem;
      padding-block: var(--s-2);
    }
  }
  .band {
    padding-block: var(--s-section);
    &[data-tone="ink"] {
      --c-text: var(--paper);
      --c-head: var(--paper);
      --c-bg: var(--ink);
      --c-muted: var(--ink-grey);
      --c-line: var(--ink-line);
      --c-accent: var(--gold);
      --c-focus: var(--gold);
      background: var(--c-bg);
      color: var(--c-text);
    }
    &[data-tone="petrol"] {
      --c-text: var(--paper);
      --c-head: var(--paper);
      --c-bg: var(--petrol);
      --c-muted: var(--paper);
      --c-line: color-mix(in oklch, var(--paper) 40%, var(--petrol));
      --c-accent: var(--paper);
      --c-accent-contrast: var(--petrol-strong);
      --c-focus: var(--paper);
      background: var(--c-bg);
      color: var(--c-text);
    }
    &[data-tone="white"] { background: var(--white); }
    & > .wrap > h2 { margin-block-end: var(--s-5); max-inline-size: 22ch; }
  }
  .site-foot {
    --logo-w: 11.25rem;
    --c-text: var(--paper);
    --c-head: var(--paper);
    --c-muted: var(--ink-grey);
    --c-focus: var(--gold);
    background: var(--ink);
    color: var(--c-text);
    padding-block: var(--s-6) var(--s-5);
    font-size: 0.9375rem;
    & > .wrap {
      display: grid;
      gap: var(--s-5);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }
    & h2 {
      font-family: var(--ff-body);
      font-size: var(--fs-0);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--c-muted);
      margin-block-end: var(--s-3);
    }
    & ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
    & [aria-current] { text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
    & small {
      grid-column: 1 / -1;
      border-block-start: 1px solid var(--ink-line);
      padding-block-start: var(--s-4);
      color: var(--c-muted);
    }
  }
}

@layer components {
  /* Logo: Bilddateien nur hier eingetragen. Zum Austauschen genügt es, die zwei url()-Angaben zu ändern. */
  .logo {
    --_w: var(--logo-w, 12rem);
    display: block;
    inline-size: var(--_w);
    aspect-ratio: 464 / 109;
    background: url("/img/logo-auf-hell.png") no-repeat center / contain;
    &[data-variant="light"] { background-image: url("/img/logo-auf-dunkel.png"); }
    @media (width >= 64rem) { --_w: var(--logo-w, 14.5rem); }
  }

  .nav-toggle {
    min-block-size: 2.75rem;
    padding-inline: var(--s-4);
    border: 1px solid var(--ink);
    border-radius: 1.5rem;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    @media (width >= 64rem) { display: none; }
  }

  .nav {
    /* mobil: Popover-Panel */
    inset: 0 0 auto auto;
    inline-size: min(100%, 22rem);
    block-size: 100dvh;
    margin: 0;
    padding: var(--s-5) var(--s-4);
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    & ul {
      list-style: none;
      padding: 0;
      display: grid;
      gap: var(--s-1);
      max-inline-size: none;
    }
    & a:not(.button) {
      display: flex;
      align-items: center;
      min-block-size: 2.75rem;
      font-weight: 500;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      &[aria-current] { text-decoration: underline; text-decoration-color: var(--c-mark); text-decoration-thickness: 3px; }
    }
    & li:last-child { margin-block-start: var(--s-3); }
    @media (width >= 64rem) {
      display: block;
      position: static;
      inset: auto;
      inline-size: auto;
      block-size: auto;
      padding: 0;
      border: 0;
      background: none;
      & ul { display: flex; align-items: center; gap: var(--s-4); }
      & li:last-child { margin-block-start: 0; margin-inline-start: var(--s-2); }
    }
  }

  .button {
    --_bg: var(--c-accent);
    --_fg: var(--c-accent-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: 2.75rem;
    padding-inline: var(--s-4);
    border: 0;
    border-radius: 1.5rem;
    background: var(--_bg);
    cursor: pointer;
    color: var(--_fg);
    font-weight: 600;
    text-decoration: none;
    &:hover { --_bg: color-mix(in oklch, var(--c-accent), black 18%); }
    &[data-variant="quiet"] {
      --_bg: transparent;
      --_fg: var(--c-head);
      box-shadow: inset 0 0 0 1px currentColor;
      &:hover { --_bg: transparent; box-shadow: inset 0 0 0 2px currentColor; }
    }
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-end: var(--s-3);
    color: var(--c-accent);
    font-size: var(--fs-0);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    & svg { inline-size: 1.125rem; flex: none; }
  }

  .hero {
    padding-block: var(--s-5) var(--s-section);
    & > .wrap {
      display: grid;
      gap: var(--s-5);
      align-items: end;
      @media (width >= 60rem) { grid-template-columns: 7fr 4fr; gap: var(--s-6); }
    }
    & h1 { max-inline-size: 17ch; }
    & p:not(.eyebrow) {
      margin-block-start: var(--s-4);
      font-size: var(--fs-2);
      max-inline-size: 38rem;
    }
    & p:has(.button) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--s-3) var(--s-4);
      margin-block-start: var(--s-5);
      font-size: var(--fs-1);
    }
  }

  .facts {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--radius);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    & div { display: grid; gap: var(--s-1); }
    & div + div { padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-line); }
    & dt {
      color: var(--c-muted);
      font-size: var(--fs-0);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    & dd { color: var(--c-head); font-weight: 500; }
  }

  .services {
    list-style: none;
    padding: 0;
    max-inline-size: none;
    border-block-start: 1px solid var(--c-line);
    & > li {
      container-type: inline-size;
      padding-block: var(--s-5);
      border-block-end: 1px solid var(--c-line);
    }
    & article {
      display: grid;
      gap: var(--s-3) var(--s-5);
      @container (inline-size > 52rem) { grid-template-columns: 16rem 1fr 14rem; align-items: start; }
    }
    /* Projekt mit Screenshot: Bild links, Text rechts */
    & article:has(> picture) {
      @container (inline-size > 52rem) {
        grid-template-columns: 22rem 1fr;
        & > picture { grid-row: 1 / span 4; }
        & > :not(picture) { grid-column: 2; }
      }
    }
    & picture { align-self: start; }
    & img { inline-size: 100%; border: 1px solid var(--c-line); border-radius: var(--radius); }
    & ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-weight: 500; }
    & p + p { margin-block-start: var(--s-3); }
    & + p { margin-block-start: var(--s-4); }
  }

  .refs {
    list-style: none;
    padding: 0;
    max-inline-size: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    border-block-start: 1px solid var(--c-line);
    & li {
      display: grid;
      gap: var(--s-1);
      padding-block: var(--s-4);
      padding-inline-end: var(--s-4);
      border-block-end: 1px solid var(--c-line);
    }
    & strong { font-family: var(--ff-head); font-size: var(--fs-3); font-weight: 500; line-height: 1.2; }
    & span { color: var(--c-muted); }
    & + p { margin-block-start: var(--s-5); }
  }

  .naio {
    display: grid;
    gap: var(--s-5);
    padding: clamp(1.5rem, 0.6196rem + 3.913vw, 4rem);
    border-radius: var(--radius);
    background: var(--white);
    border-block-start: 4px solid var(--petrol);
    @media (width >= 60rem) { grid-template-columns: 5fr 6fr; gap: var(--s-6); }
    & h2 { max-inline-size: 18ch; }
    & > div > p:not(.eyebrow) { margin-block-start: var(--s-4); }
    & > div > p:last-child { margin-block-start: var(--s-5); }
    & ul { list-style: none; padding: 0; display: grid; max-inline-size: none; }
    & li {
      display: grid;
      gap: var(--s-2);
      padding-block: var(--s-4);
      border-block-end: 1px solid var(--line);
      &:first-child { padding-block-start: 0; }
    }
    & h3 { font-size: var(--fs-2); font-family: var(--ff-body); font-weight: 600; }
    & a:not(.button) { color: var(--petrol); font-weight: 600; }
  }

  .steps {
    list-style: none;
    padding: 0;
    max-inline-size: none;
    counter-reset: step;
    display: grid;
    gap: var(--s-5) var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    & li {
      counter-increment: step;
      padding-block-start: var(--s-3);
      border-block-start: 2px solid var(--c-head);
      &::before {
        content: counter(step, decimal-leading-zero);
        display: block;
        margin-block-end: var(--s-2);
        color: var(--c-accent);
        font-family: var(--ff-head);
        font-size: var(--fs-3);
      }
    }
    & h3 { font-size: var(--fs-2); font-family: var(--ff-body); font-weight: 600; margin-block-end: var(--s-2); }
    & + p { margin-block-start: var(--s-5); }
  }

  /* Vergleichs- und Preistabellen (Naio-Vergleich) */
  .compare {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-surface);
    & table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9375rem; }
    & th, & td {
      padding: var(--s-3);
      text-align: start;
      vertical-align: top;
      border-block-end: 1px solid var(--c-line);
      overflow-wrap: anywhere;
      hyphens: auto;
      @media (width < 30rem) { padding: var(--s-2); font-size: 0.875rem; }
    }
    & thead th:first-child { inline-size: 40%; }
    & thead th {
      color: var(--c-head);
      font-family: var(--ff-head);
      font-size: var(--fs-2);
      font-weight: 500;
    }
    & th[scope="row"] { color: var(--c-head); font-weight: 500; }
    & th[scope="colgroup"] {
      padding-block-start: var(--s-4);
      color: var(--c-accent);
      font-size: var(--fs-0);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    & td > [aria-hidden] { color: var(--c-muted); }
    & tbody:last-child tr:last-child > * { border-block-end: 0; }
    & + p { margin-block-start: var(--s-4); }
  }

  /* Kontaktformular: eine Komponente, Felder über Elementselektoren */
  .form {
    display: grid;
    gap: var(--s-4);
    max-inline-size: 40rem;
    & p { display: grid; gap: var(--s-1); }
    & label { color: var(--c-head); font-weight: 600; }
    & :is(input, select, textarea) {
      inline-size: 100%;
      min-block-size: 2.75rem;
      padding: var(--s-2) var(--s-3);
      border: 1px solid var(--muted);
      border-radius: var(--radius-tag);
      background: var(--white);
      color: var(--text);
    }
    & textarea { min-block-size: 10rem; resize: vertical; }
    & :user-invalid { border: 2px solid var(--alert); }
    & p:has(button) { justify-items: start; margin-block-start: var(--s-2); }
  }

  .crumbs {
    padding-block-start: var(--s-3);
    font-size: 0.875rem;
    & ol {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 var(--s-2);
      max-inline-size: none;
    }
    & li + li::before { content: "›" / ""; margin-inline-end: var(--s-2); }
    & a { display: inline-block; padding-block: var(--s-1); }
  }

  .faq {
    max-inline-size: 52rem;
    border-block-start: 1px solid var(--c-line);
    & details { border-block-end: 1px solid var(--c-line); }
    & summary {
      padding-block: var(--s-4);
      color: var(--c-head);
      font-family: var(--ff-head);
      font-size: var(--fs-2);
      font-weight: 500;
      cursor: pointer;
      &::marker { color: var(--c-accent); }
    }
    & p { padding-block-end: var(--s-4); }
  }

  /* Neuigkeiten: Liste auf Startseite und Übersicht */
  .news {
    list-style: none;
    padding: 0;
    max-inline-size: none;
    & > li {
      container-type: inline-size;
      padding-block: var(--s-5);
      border-block-end: 1px solid var(--c-line);
      &:first-child { border-block-start: 1px solid var(--c-line); }
    }
    & article {
      display: grid;
      gap: var(--s-3) var(--s-5);
      align-content: start;
      @container (inline-size > 44rem) {
        grid-template-columns: 13rem 1fr;
        & > p:first-child { grid-row: 1 / span 2; }
        & > :not(p:first-child) { grid-column: 2; }
      }
    }
    & p:first-child {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-1) var(--s-3);
      align-content: start;
      color: var(--c-muted);
      font-size: 0.875rem;
    }
    & time { color: var(--c-head); font-weight: 600; }
    & span {
      color: var(--c-accent);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    & h3 a { text-decoration: none; &:hover { text-decoration: underline; } }
    & + p { margin-block-start: var(--s-5); }
  }

  /* Einzelner Beitrag */
  .post {
    padding-block: var(--s-5) var(--s-section);
    & header {
      margin-block-end: var(--s-5);
      padding-block-end: var(--s-4);
      border-block-end: 1px solid var(--c-line);
    }
    & h1 { max-inline-size: 24ch; font-size: var(--fs-4); line-height: 1.1; }
    & header p:last-child { margin-block-start: var(--s-3); color: var(--c-muted); }
    & h2 { margin-block: var(--s-5) var(--s-3); font-size: var(--fs-3); }
    & p:not(.eyebrow) { font-size: var(--fs-2); }
    & p + p { margin-block-start: var(--s-3); }
    & footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--s-3) var(--s-4);
      margin-block-start: var(--s-6);
      padding-block-start: var(--s-4);
      border-block-start: 1px solid var(--c-line);
    }
  }

  .contact {
    display: grid;
    gap: var(--s-5);
    @media (width >= 60rem) { grid-template-columns: 3fr 2fr; gap: var(--s-6); align-items: start; }
    & > div > p:not(.eyebrow) { margin-block-start: var(--s-4); font-size: var(--fs-2); }
    & > div > p:last-child { margin-block-start: var(--s-5); font-size: var(--fs-1); }
    & address {
      display: grid;
      gap: var(--s-3);
      padding: var(--s-4);
      border-radius: var(--radius);
      border: 1px solid var(--c-line);
      background: var(--c-surface);
      font-size: var(--fs-2);
    }
  }
  /* Langtext (Impressum, Datenschutz): Abstände im Textfluss, Überschriften eine Stufe kleiner */
  .prose {
    & > * + * { margin-block-start: var(--s-3); }
    & > h2 { margin-block: var(--s-5) 0; font-size: var(--fs-3); max-inline-size: none; }
    & > h2:first-child { margin-block-start: 0; }
    & > h3 { margin-block-start: var(--s-4); font-size: var(--fs-2); font-family: var(--ff-body); font-weight: 600; }
    & :is(ul, ol) { padding-inline-start: var(--s-4); }
  }
}

@layer utilities {
  .visually-hidden {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;

    &:is(a):focus {
      clip-path: none;
      block-size: auto;
      inline-size: auto;
      position: fixed;
      inset-block-start: var(--s-2);
      inset-inline-start: var(--s-2);
      z-index: 10;
      padding: var(--s-2) var(--s-3);
      background: var(--c-bg);
      color: var(--c-text);
    }
  }
}