/* =========================================================
       RESET
    ========================================================= */

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: auto;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      background: #0a0a09;
      color: #f1eee8;
      font-family: "Inter", sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }

    body.menu-open {
      overflow: hidden;
    }

    img {
      display: block;
      width: 100%;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
    }

    /* =========================================================
       VARIABLES
    ========================================================= */

    :root {
      --bg: #0a0a09;
      --bg-soft: #11110f;
      --card: #151513;

      --gold: #b99a63;
      --gold-light: #d5bd8a;

      --text: #f1eee8;
      --muted: #a6a29a;

      --border: rgba(185, 154, 99, 0.2);

      --serif: "Cormorant Garamond", serif;

      --header-height: 82px;
    }

    /* =========================================================
       GLOBAL
    ========================================================= */

    .container {
      width: min(1180px, calc(100% - 40px));
      margin-inline: auto;
      
    }

    .eyebrow {
      color: var(--gold-light);
      text-transform: uppercase;
      letter-spacing: 0.25em;
      font-size: 11px;
      font-weight: 500;
      margin-bottom: 16px;
   
    }

    .section-title {
      font-family: var(--serif);
      font-size: clamp(44px, 6vw, 72px);
      font-weight: 500;
      line-height: 0.95;
      letter-spacing: -0.03em;
    }

    .section-title span {
      color: var(--gold-light);
      font-style: italic;
    }

    .section-intro {
      color: var(--muted);
      max-width: 560px;
      margin-top: 22px;
      font-size: 15px;
      line-height: 1.8;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;

  width: 100%;
  height: var(--header-height);

  border-bottom: 1px solid rgba(255,255,255,0.06);

  background: rgba(10,10,9,0.62);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transition:
    background 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

header.scrolled {
  background: rgba(10,10,9,0.82);

  border-bottom-color: rgba(185,154,99,0.12);

  box-shadow:
    0 12px 40px rgba(0,0,0,0.18);
}

    .nav {
      height: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* LOGO */

    .logo {
      position: relative;
      z-index: 1100;

      font-family: var(--serif);
      font-size: 27px;
      letter-spacing: 0.12em;
      font-weight: 600;
    }

    .logo span {
      color: var(--gold-light);
    }

    /* DESKTOP NAV */

    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;

      list-style: none;
    }

    .nav-links a {
      position: relative;

      color: #c5c1ba;

      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.14em;

      transition: color 0.3s ease;
    }

    .nav-links a::after {
      content: "";

      position: absolute;
      left: 0;
      bottom: -7px;

      width: 0;
      height: 1px;

      background: var(--gold-light);

      transition: width 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--gold-light);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      padding: 12px 18px;

      border: 1px solid var(--border);

      color: var(--gold-light) !important;
    }

    .nav-cta::after {
      display: none;
    }

    .nav-cta:hover {
      background: var(--gold-light);
      color: #111 !important;
    }

    /* =========================================================
       HAMBURGER
    ========================================================= */

    .menu-toggle {
      display: none;

      position: relative;
      z-index: 1100;

      width: 46px;
      height: 46px;

      border: 1px solid rgba(213,189,138,0.3);
      background: transparent;

      cursor: pointer;

      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 6px;
    }

    .menu-toggle span {
      display: block;

      width: 20px;
      height: 1px;

      background: var(--gold-light);

      transition:
        transform 0.35s ease,
        opacity 0.25s ease;
    }

    /* Hamburger → X */

    .menu-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* =========================================================
       MOBILE NAV
    ========================================================= */

    .mobile-menu {
      position: fixed;
      z-index: 1050;

      inset: 0;

      display: flex;
      align-items: center;
      justify-content: center;

      background:
        radial-gradient(
          circle at center,
          rgba(185,154,99,0.07),
          transparent 45%
        ),
        rgba(8,8,7,0.98);

      visibility: hidden;
      opacity: 0;

      transform: translateY(-15px);

      transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
    }

    .mobile-menu.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-nav {
      width: min(400px, calc(100% - 50px));
      list-style: none;
      text-align: center;
    }

    .mobile-nav li {
      opacity: 0;
      transform: translateY(15px);

      transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    }

    .mobile-menu.active .mobile-nav li {
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-menu.active .mobile-nav li:nth-child(1) {
      transition-delay: 0.05s;
    }

    .mobile-menu.active .mobile-nav li:nth-child(2) {
      transition-delay: 0.1s;
    }

    .mobile-menu.active .mobile-nav li:nth-child(3) {
      transition-delay: 0.15s;
    }

    .mobile-menu.active .mobile-nav li:nth-child(4) {
      transition-delay: 0.2s;
    }

    .mobile-menu.active .mobile-nav li:nth-child(5) {
      transition-delay: 0.25s;
    }

    .mobile-nav a {
      display: block;

      padding: 15px 0;

      font-family: var(--serif);
      font-size: clamp(34px, 10vw, 48px);
      line-height: 1;

      color: #eee;

      transition: color 0.25s ease;
    }

    .mobile-nav a:hover {
      color: var(--gold-light);
    }

    .mobile-nav .mobile-cta {
      margin-top: 20px;

      border: 1px solid var(--gold);

      font-family: "Inter", sans-serif;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;

      color: var(--gold-light);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      position: relative;

      min-height: 100svh;

      display: flex;
      align-items: center;

      overflow: hidden;

      background:
        linear-gradient(
          90deg,
          rgba(5,5,4,0.96) 0%,
          rgba(5,5,4,0.75) 43%,
          rgba(5,5,4,0.28) 100%
        ),
        url("/thumb/DRAWINGS/Maschinerie2_Banner.jpg")
        center/cover no-repeat;
    }

    .hero::after {
      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(
          circle at 75% 45%,
          transparent 0%,
          rgba(0,0,0,0.2) 40%,
          rgba(0,0,0,0.7) 100%
        );

      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;

      max-width: 760px;

      padding-top: 80px;
      
     
    }

    .hero h1 {
      font-family: var(--serif);
      font-weight: 500;

      font-size: clamp(68px, 10vw, 140px);

      line-height: 0.78;
      letter-spacing: -0.055em;
    }

    .hero h1 em {
      display: block;

      color: var(--gold-light);
      font-weight: 400;
    }

    .hero-text {
      margin-top: 35px;

      color: #c2beb6;

      max-width: 500px;

      font-size: 16px;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      gap: 14px;

      margin-top: 38px;

      flex-wrap: wrap;
    }

    /* BUTTONS */

    .btn {
      display: inline-flex;

      align-items: center;
      justify-content: center;

      min-height: 52px;

      padding: 0 26px;

      border: 1px solid var(--gold);

      text-transform: uppercase;
      letter-spacing: 0.15em;
      font-size: 11px;

      transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.25s ease;
    }

    .btn:active {
      transform: scale(0.97);
    }

    .btn-primary {
      background: var(--gold-light);
      color: #12110f;
    }

    .btn-primary:hover {
      background: transparent;
      color: var(--gold-light);
    }

    .btn-secondary {
      color: #eee;
      border-color: rgba(255,255,255,0.22);
    }

    .btn-secondary:hover {
      border-color: var(--gold);
      color: var(--gold-light);
    }

    /* HERO BOTTOM */

    .hero-bottom {
      position: absolute;
      z-index: 3;

      bottom: 32px;
      left: 0;

      width: 100%;
    }

    .hero-bottom-inner {
      display: flex;

      justify-content: space-between;
      align-items: center;
    }

    .scroll-label {
      display: flex;

      align-items: center;
      gap: 14px;

      color: #85817a;

      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .scroll-line {
      width: 45px;
      height: 1px;

      background: var(--gold);
    }

    /* =========================================================
       INTRO
    ========================================================= */

    .intro {
      padding: 140px 0;

      background: var(--bg);
    }

    .intro-grid {
      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 90px;

      align-items: end;
    }

    .intro-number {
      margin-bottom: 25px;

      font-family: var(--serif);
      color: rgba(185,154,99,0.3);

      font-size: 160px;
      line-height: 0.7;
    }

    .intro-copy {
      color: var(--muted);

      font-size: 15px;
      line-height: 2;
    }

    .signature {
      margin-top: 28px;

      color: var(--gold-light);

      font-family: var(--serif);
      font-size: 28px;
      font-style: italic;
    }

    /* =========================================================
       PORTFOLIO
    ========================================================= */

    .portfolio {
      padding: 130px 0;

      background: #0d0d0b;

      border-top: 1px solid rgba(255,255,255,0.04);
    }

    .portfolio-heading {
      display: flex;

      justify-content: space-between;
      align-items: end;

      gap: 30px;

      margin-bottom: 55px;
    }

    .portfolio-link {
      color: var(--gold-light);

      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;

      border-bottom: 1px solid var(--gold);

      padding-bottom: 5px;

      white-space: nowrap;
    }

    /* =========================================================
       TATTOO CARDS
    ========================================================= */

    .cards {
      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 22px;
    }

    .tattoo-card {
      position: relative;

      height: 500px;

      overflow: hidden;

      background: var(--card);

      cursor: pointer;

      transform-style: preserve-3d;

      transition:
        transform 0.7s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.7s ease;
    }

    .tattoo-card:hover {
      transform:
        perspective(1200px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(-10px)
        scale(1.015);

      box-shadow:
        0 35px 70px rgba(0,0,0,0.55),
        0 0 0 1px rgba(185,154,99,0.28);
    }

    .tattoo-card-image {
      position: absolute;

      inset: 0;

      width: 100%;
      height: 100%;

      object-fit: cover;

      filter: grayscale(100%);

      transform: scale(1.01);

      transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter 0.7s ease;
    }

    .tattoo-card:hover .tattoo-card-image {
      transform: scale(1.11);
      filter: grayscale(20%);
    }

    .tattoo-card::before {
      content: "";

      position: absolute;
      z-index: 1;

      inset: 0;

      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,0.05) 20%,
          rgba(0,0,0,0.9) 100%
        );

      transition: background 0.6s ease;
    }

    .tattoo-card:hover::before {
      background:
        linear-gradient(
          180deg,
          rgba(185,154,99,0.08) 0%,
          rgba(0,0,0,0.88) 85%
        );
    }

    .tattoo-card::after {
      content: "";

      position: absolute;
      z-index: 3;

      inset: 13px;

      border: 1px solid rgba(255,255,255,0.16);

      transition:
        inset 0.5s ease,
        border-color 0.5s ease;
    }

    .tattoo-card:hover::after {
      inset: 18px;

      border-color: rgba(213,189,138,0.6);
    }

    .card-content {
      position: absolute;
      z-index: 4;

      left: 30px;
      right: 30px;
      bottom: 30px;

      transform: translateY(14px);

      transition: transform 0.5s ease;
    }

    .tattoo-card:hover .card-content {
      transform: translateY(0);
    }

    .card-category {
      color: var(--gold-light);

      font-size: 9px;

      text-transform: uppercase;
      letter-spacing: 0.22em;

      margin-bottom: 8px;
    }

    .card-title {
      font-family: var(--serif);

      font-size: 35px;

      line-height: 1;

      font-weight: 500;
    }

    .card-description {
      max-width: 330px;

      color: #c4c0b8;

      font-size: 12px;
      line-height: 1.7;

      margin-top: 12px;

      opacity: 0;

      transform: translateY(10px);

      transition:
        opacity 0.5s ease 0.05s,
        transform 0.5s ease 0.05s;
    }

    .tattoo-card:hover .card-description {
      opacity: 1;
      transform: translateY(0);
    }

    .card-arrow {
      position: absolute;

      right: 0;
      bottom: 3px;

      width: 42px;
      height: 42px;

      border: 1px solid rgba(213,189,138,0.5);

      display: flex;

      align-items: center;
      justify-content: center;

      color: var(--gold-light);

      font-size: 17px;

      opacity: 0;

      transform: translateX(-10px);

      transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    }

    .tattoo-card:hover .card-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    /* =========================================================
       SERVICES
    ========================================================= */

    .services {
      padding: 140px 0;

      background: var(--bg);
    }

    .services-grid {
      margin-top: 70px;

      border-top: 1px solid var(--border);
    }

    .service {
      display: grid;

      grid-template-columns: 80px 1fr 100px;

      align-items: center;

      gap: 35px;

      padding: 30px 0;

      border-bottom: 1px solid var(--border);

      transition: padding 0.35s ease;
    }

    .service:hover {
      padding-left: 12px;
      padding-right: 12px;
    }

    .service-number {
      color: var(--gold);

      font-family: var(--serif);

      font-size: 23px;
    }

    .service h3 {
      font-family: var(--serif);

      font-size: 31px;

      font-weight: 500;
    }

    .service p {
      color: var(--muted);

      font-size: 13px;

      margin-top: 4px;
    }

    .service-price {
      color: var(--gold-light);

      text-align: right;

      font-family: var(--serif);

      font-size: 24px;
    }

    /* =========================================================
       ARTIST
    ========================================================= */

    .artist {
      padding: 130px 0;

      background: #0d0d0b;
    }

    .artist-grid {
      display: grid;

      grid-template-columns: 0.9fr 1.1fr;

      gap: 90px;

      align-items: center;
    }

    .artist-image {
      height: 620px;

      object-fit: cover;

      filter: grayscale(100%);
    }

    .artist-copy h2 {
      font-family: var(--serif);

      font-size: clamp(48px, 6vw, 76px);

      line-height: 0.95;

      font-weight: 500;
    }

    .artist-copy h2 span {
      color: var(--gold-light);

      font-style: italic;
    }

    .artist-copy p {
      max-width: 530px;

      margin-top: 28px;

      color: var(--muted);

      line-height: 2;

      font-size: 15px;
    }

    .artist-details {
      display: flex;

      gap: 50px;

      margin-top: 42px;
    }

    .detail strong {
      display: block;

      color: var(--gold-light);

      font-family: var(--serif);

      font-size: 28px;

      font-weight: 500;
    }

    .detail span {
      color: #77736d;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      font-size: 9px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .cta {
      position: relative;

      padding: 150px 0;

      text-align: center;

      background:
        linear-gradient(
          rgba(5,5,4,0.72),
          rgba(5,5,4,0.9)
        ),
        url("/thumb/DRAWINGS/Warp_Art_23.jpg")
        center/cover no-repeat;
    }

    .cta h2 {
      font-family: var(--serif);

      font-size: clamp(55px, 8vw, 100px);

      font-weight: 500;

      line-height: 0.9;
    }

    .cta h2 span {
      display: block;

      color: var(--gold-light);

      font-style: italic;
    }

    .cta p {
      color: #bbb6ae;

      max-width: 500px;

      margin: 30px auto;

      font-size: 15px;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      padding: 60px 0 30px;

      background: #080807;
    }

    .footer-grid {
      display: grid;

      grid-template-columns: 2fr 1fr 1fr 1fr;

      gap: 50px;

      padding-bottom: 55px;

      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .footer-logo {
      font-family: var(--serif);

      font-size: 36px;

      letter-spacing: 0.08em;
    }

    .footer-logo span {
      color: var(--gold-light);
    }

    .footer-description {
      color: #77736d;

      max-width: 310px;

      margin-top: 15px;

      font-size: 13px;

      line-height: 1.8;
    }

    .footer-column h4 {
      color: var(--gold-light);

      font-size: 10px;

      letter-spacing: 0.2em;

      text-transform: uppercase;

      margin-bottom: 18px;
    }

    .footer-column a,
    .footer-column p {
      display: block;

      color: #8b8780;

      font-size: 12px;

      margin-bottom: 9px;

      transition: color 0.3s ease;
    }

    .footer-column a:hover {
      color: var(--gold-light);
    }

    .copyright {
      display: flex;

      justify-content: space-between;

      gap: 20px;

      padding-top: 25px;

      color: #55524d;

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 0.1em;
    }

    /* =========================================================
       REVEAL
    ========================================================= */

    .reveal {
      opacity: 0;

      transform: translateY(30px);

      transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    }

    .reveal.visible {
      opacity: 1;

      transform: translateY(0);
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1000px) {

      :root {
        --header-height: 76px;
      }

      .nav-links {
        gap: 20px;
      }

      .nav-links a {
        font-size: 10px;
      }

      .cards {
        grid-template-columns: repeat(2, 1fr);
      }

      .artist-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
      }

      .artist-image {
        height: 520px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

    }

    /* =========================================================
       MOBILE NAVIGATION
    ========================================================= */

    @media (max-width: 760px) {

      .container {
        width: min(100% - 30px, 1180px);
      }

      /* Hide desktop navigation */

      .nav-links {
        display: none;
      }

      /* Show hamburger */

      .menu-toggle {
        display: flex;
      }

      /* Hero */

     .hero {
        min-height: 78svh;
        height: 78svh;

        background:
            linear-gradient(
                90deg,
                rgba(5,5,4,0.9) 0%,
                rgba(5,5,4,0.55) 100%
            ),
            url("/thumb/DRAWINGS/Maschinerie_Banner.jpg")
            65% center/cover no-repeat;
            
    }

    .hero-content {
        padding-top: 40px;
        
    }

    .hero h1 {
        font-size: clamp(70px, 20vw, 105px);
        line-height: 0.82;
    }

    .hero-text {
        font-size: 16px;
        line-height: 1.8;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        min-height: 60px;
    }

    .hero-bottom {
        bottom: 18px;
    }
      /* Sections */

      .intro,
      .portfolio,
      .services,
      .artist {
        padding: 90px 0;
      }

      /* Intro */

      .intro-grid {
        grid-template-columns: 1fr;

        gap: 55px;
      }

      .intro-number {
        font-size: 110px;
      }

      /* Portfolio */

      .portfolio-heading {
        display: block;

        margin-bottom: 40px;
      }

      .portfolio-link {
        display: inline-block;

        margin-top: 25px;
      }

      .cards {
        grid-template-columns: 1fr;

        gap: 18px;
      }

      .tattoo-card {
        height: 480px;
      }

      /*
       * Auf Touch-Geräten gibt es keinen echten Hover.
       * Deshalb bleiben Beschreibung und Pfeil sichtbar.
       */

      .card-description {
        opacity: 1;

        transform: none;
      }

      .card-arrow {
        opacity: 1;

        transform: none;
      }

      /* Services */

      .services-grid {
        margin-top: 50px;
      }

      .service {
        grid-template-columns: 45px 1fr;

        gap: 10px 15px;

        padding: 25px 0;
      }

      .service h3 {
        font-size: 27px;
      }

      .service p {
        font-size: 12px;

        max-width: 400px;
      }

      .service-price {
        grid-column: 2;

        text-align: left;

        font-size: 22px;

        margin-top: -3px;
      }

      /* Artist */

      .artist-grid {
        grid-template-columns: 1fr;

        gap: 45px;
      }

      .artist-image {
        height: 500px;
      }

      .artist-copy h2 {
        font-size: clamp(50px, 15vw, 76px);
      }

      .artist-copy p {
        font-size: 14px;

        line-height: 1.9;
      }

      .artist-details {
        gap: 28px;

        flex-wrap: wrap;
      }

      /* CTA */

      .cta {
        padding: 100px 0;
      }

      .cta h2 {
        font-size: clamp(55px, 16vw, 90px);
      }

      .cta p {
        font-size: 14px;
      }

      /* Footer */

      .footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
      }

      .copyright {
        flex-direction: column;

        gap: 10px;
      }

    }

    /* =========================================================
       SMALL PHONES
    ========================================================= */

    @media (max-width: 420px) {

      .container {
        width: calc(100% - 24px);
       
      }

      .logo {
        font-size: 22px;
      }

      .menu-toggle {
        width: 42px;
        height: 42px;
      }

      .hero h1 {
        font-size: 63px;

        letter-spacing: -0.06em;
      }

      .hero-text {
        font-size: 13px;
      }

      .section-title {
        font-size: 48px;
      }

      .tattoo-card {
        height: 430px;
      }

      .card-content {
        left: 24px;
        right: 24px;
        bottom: 24px;
      }

      .card-title {
        font-size: 31px;
      }

      .card-description {
        padding-right: 50px;
      }

      .tattoo-card::after {
        inset: 10px;
      }

      .service h3 {
        font-size: 24px;
      }

      .service p {
        font-size: 11px;
      }

      .artist-image {
        height: 430px;
      }

      .artist-details {
        gap: 20px;
      }

      .detail strong {
        font-size: 25px;
      }

      .detail span {
        font-size: 8px;
      }

      .footer-logo {
        font-size: 32px;
      }

    }

    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
      }

      .reveal {
        opacity: 1;

        transform: none;
      }

    }


/* =========================================================
   GRÖSSERE TYPOGRAFIE
   Diese Regeln am Ende des CSS einfügen
========================================================= */

/* Allgemeiner Fließtext */
body {
  font-size: 17px;
}

/* Kleine Überschriften / Kategorien */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
}

/* Section Headlines */
.section-title {
  font-size: clamp(58px, 7vw, 92px);
}

/* Section Beschreibung */
.section-intro {
  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   HERO
========================================================= */

.hero h1 {
  font-size: clamp(82px, 11vw, 165px);
}

.hero-text {
  font-size: 18px;
  line-height: 1.85;
  max-width: 570px;
}

.btn {
  min-height: 58px;
  padding: 0 30px;
  font-size: 12px;
}

/* =========================================================
   INTRO
========================================================= */

.intro-number {
  font-size: 190px;
}

.intro-copy {
  font-size: 18px;
  line-height: 2;
}

.signature {
  font-size: 32px;
}

/* =========================================================
   PORTFOLIO
========================================================= */

.card-category {
  font-size: 11px;
}

.card-title {
  font-size: 42px;
}

.card-description {
  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   SERVICES
========================================================= */

.service-number {
  font-size: 28px;
}

.service h3 {
  font-size: 38px;
}

.service p {
  font-size: 15px;
  line-height: 1.7;
}

.service-price {
  font-size: 29px;
}

/* =========================================================
   ARTIST
========================================================= */

.artist-copy h2 {
  font-size: clamp(62px, 7vw, 94px);
}

.artist-copy p {
  font-size: 18px;
  line-height: 2;
}

.detail strong {
  font-size: 34px;
}

.detail span {
  font-size: 10px;
}

/* =========================================================
   CTA
========================================================= */

.cta h2 {
  font-size: clamp(68px, 9vw, 120px);
}

.cta p {
  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   FOOTER
========================================================= */

.footer-description {
  font-size: 14px;
  line-height: 1.9;
}

.footer-column a,
.footer-column p {
  font-size: 14px;
}

.copyright {
  font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .hero h1 {
    font-size: clamp(76px, 12vw, 125px);
  }

  .section-title {
    font-size: clamp(55px, 8vw, 78px);
  }

  .card-title {
    font-size: 38px;
  }

  .service h3 {
    font-size: 34px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  body {
    font-size: 16px;
  }

  .eyebrow {
    font-size: 11px;
  }

  /* Hero */

  .hero h1 {
    font-size: clamp(70px, 20vw, 105px);
    line-height: 0.82;
  }

  .hero-text {
    font-size: 16px;
    line-height: 1.8;
  }

  .btn {
    min-height: 60px;
    font-size: 12px;
  }

  /* Sections */

  .section-title {
    font-size: clamp(54px, 15vw, 78px);
    line-height: 0.92;
  }

  .section-intro {
    font-size: 16px;
    line-height: 1.8;
  }

  /* Intro */

  .intro-number {
    font-size: 120px;
  }

  .intro-copy {
    font-size: 16px;
    line-height: 1.9;
  }

  .signature {
    font-size: 29px;
  }

  /* Portfolio */

  .card-category {
    font-size: 10px;
  }

  .card-title {
    font-size: 38px;
  }

  .card-description {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Services */

  .service-number {
    font-size: 25px;
  }

  .service h3 {
    font-size: 30px;
  }

  .service p {
    font-size: 14px;
    line-height: 1.7;
  }

  .service-price {
    font-size: 26px;
  }

  /* Artist */

  .artist-copy h2 {
    font-size: clamp(58px, 16vw, 82px);
  }

  .artist-copy p {
    font-size: 16px;
    line-height: 1.9;
  }

  .detail strong {
    font-size: 30px;
  }

  .detail span {
    font-size: 9px;
  }

  /* CTA */

  .cta h2 {
    font-size: clamp(62px, 17vw, 92px);
  }

  .cta p {
    font-size: 16px;
    line-height: 1.8;
  }

}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 420px) {

  .hero h1 {
    font-size: 68px;
  }

  .hero-text {
    font-size: 15px;
  }

  .section-title {
    font-size: 53px;
  }

  .section-intro {
    font-size: 15px;
  }

  .card-title {
    font-size: 34px;
  }

  .card-description {
    font-size: 13px;
  }

  .service h3 {
    font-size: 27px;
  }

  .service p {
    font-size: 13px;
  }

  .service-price {
    font-size: 24px;
  }

  .artist-copy h2 {
    font-size: 57px;
  }

  .artist-copy p {
    font-size: 15px;
  }

  .cta h2 {
    font-size: 60px;
  }

  .cta p {
    font-size: 15px;
  }

}

/* =========================================================
   NAV – TRANSPARENT / GLASS
========================================================= */

header {
  background: rgba(10, 10, 9, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-bottom-color: rgba(255, 255, 255, 0.07);

  transition:
    background 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

header.scrolled {
  background: rgba(10, 10, 9, 0.82);

  border-bottom-color: rgba(185, 154, 99, 0.12);

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   SMOOTH SCROLL – REINE JAVASCRIPT VERSION
========================================================= */

html {
  scroll-behavior: auto;
}

/*
 * Während unser Smooth-Scroll läuft,
 * verhindert diese Klasse unnötige Interaktion.
 */

body.smooth-scrolling {
  overflow-anchor: none;
}


/* =========================================================
   MOBILE HERO – FINAL FIX
========================================================= */

@media (max-width: 760px) {

  .hero {
    /*
     * Nicht mehr auf eine feste Höhe zwingen.
     * Der Inhalt darf den Hero bei kleinen Displays
     * nach unten erweitern.
     */
    min-height: 100svh;
    height: auto;

    display: flex;
    align-items: center;

    /*
     * Wichtig:
     * Der Hero darf seinen Inhalt nicht abschneiden.
     */
    overflow: visible;

    background:
      linear-gradient(
        90deg,
        rgba(5, 5, 4, 0.90) 0%,
        rgba(5, 5, 4, 0.55) 100%
      ),
      url("/thumb/DRAWINGS/Maschinerie2_Banner.jpg")
      65% center / cover no-repeat;
  }

  .hero-content {
    width: 100%;

    /*
     * Fixed Header = 76px
     * + zusätzlicher Sicherheitsabstand
     */
    padding-top: calc(var(--header-height) + 35px);

    /*
     * Platz für hero-bottom / Scroll-Hinweis
     */
    padding-bottom: 100px;
  }

  .hero h1 {
    font-size: clamp(70px, 20vw, 105px);
    line-height: 0.82;
  }

  .hero-text {
    font-size: 16px;
    line-height: 1.8;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 38px;
  }

  .btn {
    width: 100%;
    min-height: 60px;
  }

  .hero-bottom {
    bottom: 18px;
  }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 420px) {

  .hero {
    /*
     * Auch hier KEINE feste 72svh-Höhe.
     */
    min-height: 100svh;
    height: auto;
  }

  .hero-content {
    /*
     * Header bleibt 76px hoch.
     */
    padding-top: calc(var(--header-height) + 25px);
    padding-bottom: 100px;
  }

  .hero h1 {
    font-size: 68px;
    line-height: 0.82;
    letter-spacing: -0.06em;
  }

  .hero-text {
    font-size: 15px;
  }
}