:root {
      --ink: #2e3141;
      --ink-deep: #252735;
      --ink-soft: #3a3e52;
      --paper: #f7f5f0;
      --paper-warm: #eeece7;
      --white: #ffffff;
      --accent: #35b589;
      --accent-dark: #298c6a;
      --muted: #bfc1cb;
      --line: rgba(255, 255, 255, .22);
      --shadow: 0 24px 70px rgba(24, 26, 38, .22);
      --radius: 1.25rem;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--ink);
      color: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

    .skip-link {
      position: fixed;
      left: 1rem;
      top: -5rem;
      z-index: 20;
      background: var(--accent);
      color: var(--white);
      padding: .65rem .9rem;
      border-radius: .45rem;
      text-decoration: none;
      font-weight: 800;
    }
    .skip-link:focus { top: 1rem; }

    .wrap { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; }
    .eyebrow {
      margin: 0 0 1rem;
      color: var(--accent);
      font-size: .75rem;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
    h1 { max-width: 760px; margin-bottom: 1.5rem; font-size: clamp(3.3rem, 8vw, 7.4rem); }
    h2 { margin-bottom: 1rem; font-size: clamp(2.2rem, 4vw, 4.5rem); }
    h3 { margin-bottom: .7rem; font-size: 1.35rem; }
    .lead { max-width: 670px; color: rgba(255,255,255,.76); font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
    .muted { color: rgba(255,255,255,.66); }

    .hero {
      position: relative;
      min-height: 92vh;
      display: grid;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 83% 26%, rgba(239,100,128,.16), transparent 18rem),
        linear-gradient(135deg, rgba(37,39,53,.55), rgba(46,49,65,.30)),
        url("../images/hintergrund.webp") center / cover no-repeat;
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 42rem;
      height: 42rem;
      right: -17rem;
      bottom: -20rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
      box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 11rem rgba(255,255,255,.02);
    }
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 1px;
      height: 55vh;
      top: 0;
      right: 18%;
      opacity: .7;
      transform: rotate(0deg);
      transform-origin: top;
    }
    .topline {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--line);
    }
    .brandline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand {
      color: var(--white);
      text-decoration: none;
      font-size: .92rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .brand span { color: var(--accent); }
    .top-contact { color: rgba(255,255,255,.72); font-size: .9rem; text-decoration: none; }
    .top-contact:hover { color: var(--white); }
    .hero-copy { padding: 9rem 0 6rem; }
    .hero-copy strong { color: var(--white); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 3.2rem;
      padding: .75rem 1.15rem;
      border: 1px solid rgba(255,255,255,.36);
      border-radius: 999px;
      color: var(--white);
      font-weight: 800;
      text-decoration: none;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .button:hover { transform: translateY(-2px); border-color: var(--white); }
    .button.primary { background: var(--accent); border-color: var(--accent); }
    .button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
    .scroll-cue {
      position: absolute;
      bottom: 1.6rem;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,.6);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .scroll-cue::after { content: " ↓"; color: var(--accent); font-size: 1rem; }

    .section { padding: 7.5rem 0; }
    .section.light { background: var(--paper); color: var(--ink); }
    .section.light .eyebrow { color: var(--accent-dark); }
    .section.light .muted, .section.light .body-copy { color: rgba(46,49,65,.7); }
    .section.alt { background: var(--ink-soft); }
    .section-head { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
    .section-head h2 { margin-bottom: 0; }
    .section-head p { max-width: 560px; margin-bottom: .2rem; }

    .role-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(46,49,65,.22); }
    .role { padding: 1.5rem 1.2rem 1.4rem 0; border-bottom: 1px solid rgba(46,49,65,.22); }
    .role + .role { padding-left: 1.2rem; border-left: 1px solid rgba(46,49,65,.22); }
    .role-number { display: block; margin-bottom: 2.8rem; color: var(--accent-dark); font-size: .8rem; font-weight: 900; }
    .role p { color: rgba(46,49,65,.68); font-size: .95rem; }

    .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
    .service { min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; padding: 2.2rem; border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow); }
    .service:nth-child(2), .service:nth-child(3) { background: var(--ink-soft); }
    .service-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 2rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-weight: 900; }
    .service p { max-width: 440px; color: rgba(255,255,255,.68); }
    .service a { margin-top: auto; color: var(--white); font-weight: 800; text-decoration: none; }
    .service a:hover { color: var(--accent); }

    .placeholder-note { display: inline-flex; gap: .45rem; align-items: center; padding: .45rem .7rem; border: 1px dashed currentColor; border-radius: .35rem; color: var(--accent-dark); font-size: .73rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
    .placeholder-note::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
    .asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
    .asset-card { display: flex; flex-direction: column; min-height: 250px; padding: 2rem; border-radius: var(--radius); background: var(--paper-warm); color: var(--ink); box-shadow: var(--shadow); }
    .asset-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 2rem; border: 1px solid var(--accent-dark); border-radius: 50%; color: var(--accent-dark); font-size: 1.25rem; font-weight: 900; }
    .asset-card h3 { margin-bottom: .8rem; }
    .asset-card p { flex: 1; color: rgba(46,49,65,.68); font-size: .94rem; }
    .asset-link { width: fit-content; color: var(--ink); font-weight: 850; text-decoration: none; }
    .asset-link:hover { color: var(--accent-dark); }

    .portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.3rem; }
    .portfolio-card { position: relative; min-height: 280px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; grid-column: span 4; padding: 2rem; border-radius: var(--radius); background: var(--paper-warm); color: var(--ink); box-shadow: var(--shadow); isolation: isolate; }
    .portfolio-card.has-image { background-color: var(--paper-warm); }
    .portfolio-card.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(247,245,240,.72) 0%, rgba(247,245,240,.94) 100%), var(--portfolio-image); background-size: cover; background-position: var(--portfolio-image-position, center); }
    .portfolio-card.dark.has-image { background-color: var(--ink); }
    .portfolio-card.dark.has-image::before { background-image: linear-gradient(180deg, rgba(37,39,53,.68) 0%, rgba(37,39,53,.95) 100%), var(--portfolio-image); }
    .portfolio-card.has-image .work-visual { opacity: .24; }
    .portfolio-card > * { position: relative; z-index: 1; }
    .portfolio-card.featured { min-height: 390px; order: -1; }
    .portfolio-card.featured-wide { grid-column: span 7; }
    .portfolio-card.featured-narrow { grid-column: span 5; }
    .portfolio-card.dark { background: var(--ink); color: var(--white); box-shadow: none; }
    .portfolio-card h3 { margin-bottom: .9rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
    .portfolio-card.featured h3 { max-width: 430px; margin-top: 1.5rem; font-size: clamp(1.6rem, 3vw, 2.7rem); }
    .portfolio-card p { flex: 1; max-width: 440px; color: rgba(46,49,65,.7); font-size: .94rem; }
    .portfolio-card.dark p { color: rgba(255,255,255,.66); }
    .portfolio-card small { display: block; margin-bottom: 1.8rem; color: var(--accent-dark); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .portfolio-card.dark small { color: var(--accent); }
    .portfolio-card a { color: var(--ink); font-weight: 850; text-decoration: none; }
    .portfolio-card.dark a { color: var(--white); }
    .portfolio-card a:hover { color: var(--accent-dark); }
    .portfolio-card.dark a:hover { color: var(--accent); }
    .portfolio-card.dark .placeholder-note { color: var(--accent); }
    .portfolio-card .work-link { position: relative; z-index: 1; width: fit-content; color: inherit; }
    .portfolio-card .work-link:hover { color: var(--accent-dark); }
    .portfolio-card.dark .work-link:hover { color: var(--accent); }
    .portfolio-card .work-visual { position: absolute; right: -4rem; bottom: -5rem; width: 19rem; height: 19rem; border: 1px solid rgba(46,49,65,.25); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(46,49,65,.05), 0 0 0 5rem rgba(46,49,65,.035); }
    /* Bei Referenzkarten liegt der Link über der gesamten Kachel – nicht nur über dem Linktext. */
    .portfolio-card.has-card-link { padding: 0; }
    .portfolio-card.has-card-link > .portfolio-card-link { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; }
    .portfolio-card.has-card-link > .portfolio-card-link > * { position: relative; z-index: 1; }
    .portfolio-card.has-card-link > .portfolio-card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
    .portfolio-card.has-card-link > .portfolio-card-link:hover h3 { color: var(--accent-dark); }
    .portfolio-card.dark.has-card-link > .portfolio-card-link:hover h3 { color: var(--accent); }
    .portfolio-card.dark .work-visual { border-color: rgba(255,255,255,.24); box-shadow: 0 0 0 2rem rgba(255,255,255,.05), 0 0 0 5rem rgba(255,255,255,.025); }
    .portfolio-card .work-visual::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; right: 3rem; top: 1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .5rem rgba(53,181,137,.13); }

    .content-state { grid-column: 1 / -1; padding: 2rem; border: 1px dashed rgba(46,49,65,.28); border-radius: var(--radius); color: rgba(46,49,65,.66); }

    .section:not(.light) .content-state { border-color: var(--line); color: rgba(255,255,255,.66); }
    .content-state[hidden] { display: none; }
    .content-state.error { border-color: var(--accent-dark); color: var(--accent-dark); }
    .content-state::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: .05em; }

    .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; }
    .portrait-placeholder { position: relative; min-height: 570px; overflow: hidden; background: transparent; }
    .portrait-placeholder::before { content: "PORTRAIT"; position: absolute; left: 1rem; top: 1rem; color: rgba(255,255,255,.58); font-size: .7rem; font-weight: 850; letter-spacing: .14em; }
    .portrait-placeholder::after { content: "Anne-Dorette Ziems"; position: absolute; inset: auto 1.5rem 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.32); color: rgba(255,255,255,.72); font-size: .88rem; }
    .portrait-mark { position: absolute; left: 50%; top: 50%; width: 13rem; height: 13rem; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.34); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.04), 0 0 0 6rem rgba(255,255,255,.025); }
    .portrait-mark::before { content: "ADZ"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--accent); font-size: 2rem; font-weight: 900; letter-spacing: .1em; }
    .about-copy p { max-width: 650px; color: rgba(255,255,255,.74); font-size: 1.1rem; }
    .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2.2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line); }
    .fact strong { display: block; margin-bottom: .25rem; font-size: 1.2rem; }
    .fact span { color: rgba(255,255,255,.58); font-size: .9rem; }
    .portrait-placeholder {
     border-radius: var(--radius);
    }
    .portrait-placeholder .portrait-image {
 	  position: absolute;
 	  inset: 0;
 	  width: 100%;
 	  height: 100%;
 	  max-width: none;
 	  object-fit: cover;
 	  object-position: center 35%;
	  }

    .portrait-placeholder::before,
    .portrait-placeholder::after,
    .portrait-placeholder .portrait-mark {
  	display: none;
    }

    .reference-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
    .reference { min-height: 280px; display: flex; flex-direction: column; padding: 2rem; border-radius: var(--radius); background: var(--paper-warm); color: var(--ink); box-shadow: var(--shadow); }
    .reference:nth-child(2) { background: var(--ink); color: var(--white); box-shadow: none; }
    .reference small { display: block; margin-bottom: 1.8rem; color: var(--accent-dark); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .reference:nth-child(2) small { color: var(--accent); }
    .reference h3 { margin-bottom: .9rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
    .reference p { flex: 1; color: rgba(46,49,65,.68); font-size: .94rem; }
    .reference:nth-child(2) p { color: rgba(255,255,255,.66); }
    .reference a { color: var(--ink); font-weight: 850; text-decoration: none; }
    .reference:nth-child(2) a { color: var(--white); }
    .reference a:hover { color: var(--accent-dark); }
    .reference:nth-child(2) a:hover { color: var(--accent); }
    .reference:nth-child(2) .placeholder-note { color: var(--accent); }
    .portfolio-cta { display: flex; justify-content: center; margin-top: 2.2rem; }
    .button.accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
    .button.accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

    .contact { position: relative; overflow: hidden; padding: 8rem 0; background: var(--accent); color: var(--white); }
    .contact::before { content: ""; position: absolute; width: 42rem; height: 42rem; right: -18rem; top: -20rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255,255,255,.07), 0 0 0 11rem rgba(255,255,255,.05); }
    .contact-content { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
    .contact h2 { max-width: 700px; margin-bottom: 1.2rem; }
    .contact p { max-width: 570px; color: rgba(255,255,255,.84); font-size: 1.15rem; }
    .contact .button { border-color: var(--white); }
    .contact .button:hover { background: var(--white); color: var(--accent-dark); }

    footer { padding: 2rem 0; background: var(--ink-deep); color: rgba(255,255,255,.6); font-size: .84rem; }
    .footer-line { display: block; }
    .footer-social { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; }
    .social-links { display: flex; align-items: center; justify-content: center; gap: 1rem; }
    .social-link { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 0; color: var(--accent); transition: color .2s ease, transform .2s ease; }
    .social-link:hover { transform: translateY(-2px); background: transparent; color: var(--white); }
    .social-link svg { width: 2.1rem; height: 2.1rem; fill: currentColor; }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
    .footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
    footer a { text-decoration: none; }
    footer a:hover { color: var(--white); }

    @media (max-width: 850px) {
      .section-head, .about-grid { grid-template-columns: 1fr; gap: 1rem; }
      .about-grid { gap: 2.5rem; }
      .role-grid { grid-template-columns: repeat(2, 1fr); }
      .role:nth-child(3) { padding-left: 0; border-left: 0; }
      .role:nth-child(2), .role:nth-child(4) { padding-left: 1.2rem; border-left: 1px solid rgba(46,49,65,.22); }
      .portfolio-grid { grid-template-columns: 1fr; }
      .portfolio-card, .portfolio-card.featured { grid-column: 1 / -1; min-height: 330px; }
      .asset-grid { grid-template-columns: 1fr; }
      .contact-content { display: block; }
      .contact .button { margin-top: 1rem; }
    }
    @media (max-width: 560px) {
      .wrap { width: min(calc(100% - 2rem), var(--max)); }
      .top-contact { display: none; }
      .hero-copy { padding-top: 8rem; }
      .hero { min-height: 88vh; }
      .section { padding: 5rem 0; }
      .role-grid, .service-grid, .facts { grid-template-columns: 1fr; }
      .role + .role, .role:nth-child(2), .role:nth-child(4) { padding-left: 0; border-left: 0; }
      .role-number { margin-bottom: 1.3rem; }
      .service { min-height: auto; padding: 1.6rem; }
      .work-card { min-height: 330px; padding: 1.5rem; }
      .portrait-placeholder { min-height: 420px; }
      .footer-line { display: block; }
      .footer-links { margin-top: .7rem; }
      .portfolio-card.has-card-link > .portfolio-card-link { padding: 1.5rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }
    .referenzen-page .portfolio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.referenzen-page .portfolio-grid .portfolio-card,
.referenzen-page .portfolio-grid .portfolio-card.featured-wide,
.referenzen-page .portfolio-grid .portfolio-card.featured-narrow {
  grid-column: auto;
  min-height: 360px;
  order: 0;
}

@media (max-width: 850px) {
  .referenzen-page .portfolio-grid {
    grid-template-columns: 1fr;
  }
}