/* =========================================================
   KOMBINAT GESTALTUNG — GRAFIKDESIGN
   Ergänzung zu style.css
   ========================================================= */


/* ---------------------------------------------------------
   1. HERO
   --------------------------------------------------------- */

.service-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: clamp(48px, 8vw, 120px);
    min-height: min(760px, calc(100svh - 86px));
    padding-top: clamp(80px, 10vw, 150px);
    padding-bottom: clamp(80px, 10vw, 150px);
}

.service-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.service-hero .eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
}

.service-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(54px, 7.5vw, 112px);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 0.94;
}

.service-hero h1 span {
    display: block;
    color: var(--accent);
}

.service-hero p {
    max-width: 510px;
    margin: 32px 0 0;
    color: var(--muted);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.8;
}

.service-hero .button,
.service-hero .button-dark {
    margin-top: 32px;
}


/* ---------------------------------------------------------
   2. GRAFISCHE HERO-ILLUSTRATION
   --------------------------------------------------------- */

.service-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 510px;
    aspect-ratio: 0.9;
    justify-self: end;
}

.visual-frame {
    position: absolute;
    inset: 5% 3%;
    border: 1px solid var(--border);
    transform: rotate(-5deg);
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-visual:hover .visual-frame {
    transform: rotate(-2deg);
}

.visual-composition {
    position: relative;
    width: 82%;
    height: 82%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(25, 30, 25, 0.06);
}

.composition-square {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 49%;
    aspect-ratio: 1;
    background: var(--accent);
}

.composition-circle {
    position: absolute;
    right: 8%;
    bottom: 15%;
    width: 43%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--background);
    border: 1px solid var(--text);
}

.composition-line {
    position: absolute;
    top: 0;
    right: 25%;
    width: 1px;
    height: 100%;
    background: var(--border);
}

.composition-cross {
    position: absolute;
    top: 18%;
    right: 12%;
    width: 34px;
    height: 34px;
}

.composition-cross::before,
.composition-cross::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--text);
    transform: translate(-50%, -50%);
}

.composition-cross::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.composition-type {
    position: absolute;
    bottom: 8%;
    left: 10%;
    z-index: 2;
    color: var(--text);
    font-family: "DM Mono", monospace;
    font-size: clamp(48px, 7vw, 86px);
    font-weight: 500;
    letter-spacing: -0.12em;
    line-height: 1;
}

.composition-type::after {
    content: "GESTALTUNG / 01";
    display: block;
    margin-top: 12px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.12em;
}


/* ---------------------------------------------------------
   3. LEISTUNGSÜBERSICHT
   --------------------------------------------------------- */

.service-section {
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: clamp(90px, 11vw, 160px);
    border-top: 1px solid var(--border);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.65fr);
    align-items: end;
    gap: 40px;
    margin-bottom: clamp(44px, 6vw, 76px);
}

.section-heading .eyebrow {
    margin: 0 0 20px;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-heading h2 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 1;
}

.section-heading > p {
    max-width: 430px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
    transition:
        background-color 250ms ease,
        transform 250ms ease;
}

.service-card:hover {
    z-index: 1;
    background: var(--surface);
}

.service-number {
    display: inline-block;
    margin-bottom: 38px;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.service-card h3 {
    margin: 0 0 14px;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.service-card p {
    max-width: 360px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   4. GESTALTUNGSPRINZIP
   --------------------------------------------------------- */

.design-principle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 460px;
    padding: clamp(70px, 10vw, 140px) clamp(28px, 7vw, 100px);
    overflow: hidden;
    background: var(--text);
    color: var(--background);
}

.design-principle::after {
    position: absolute;
    right: -8%;
    bottom: -55%;
    width: min(55vw, 620px);
    aspect-ratio: 1;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(255, 255, 255, 0.025),
        0 0 0 80px rgba(255, 255, 255, 0.025),
        0 0 0 120px rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.design-principle .eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 26px;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.design-principle h2 {
    position: relative;
    z-index: 1;
    max-width: 950px;
    margin: 0;
    font-size: clamp(42px, 7vw, 94px);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 0.98;
}

.design-principle h2 span {
    color: var(--accent);
}

.design-principle p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 32px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   5. ABLAUF / PROZESS
   --------------------------------------------------------- */

.process-section {
    padding-top: clamp(90px, 11vw, 150px);
    padding-bottom: clamp(90px, 11vw, 150px);
    border-bottom: 1px solid var(--border);
}

.process-section .section-heading {
    margin-bottom: 64px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.process-step {
    position: relative;
    padding: 28px 24px 0 0;
}

.process-step + .process-step {
    padding-left: 24px;
    border-left: 1px solid var(--border);
}

.process-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
}

.process-step h3 {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.process-step p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   6. VERWANDTE LEISTUNGEN
   --------------------------------------------------------- */

.related-services {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(40px, 8vw, 120px);
    padding-top: clamp(80px, 10vw, 130px);
    padding-bottom: clamp(80px, 10vw, 130px);
}

.related-services .eyebrow {
    margin: 0 0 20px;
    color: var(--accent);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.related-services h2 {
    max-width: 500px;
    margin: 0;
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 1.02;
}

.related-services-list {
    border-top: 1px solid var(--border);
}

.related-service-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: color 200ms ease;
}

.related-service-link:hover {
    color: var(--accent);
}

.related-service-link h3 {
    margin: 0;
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 500;
    letter-spacing: -0.04em;
}

.related-service-link p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.related-service-link .link-arrow {
    flex: 0 0 auto;
    font-size: 24px;
    transition: transform 200ms ease;
}

.related-service-link:hover .link-arrow {
    transform: translate(4px, -4px);
}


/* ---------------------------------------------------------
   7. ABSCHLUSS / CTA
   --------------------------------------------------------- */

.service-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(60px, 8vw, 110px);
    overflow: hidden;
    background: var(--accent);
    color: #fff;
}

.service-cta .eyebrow {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.75);
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-cta h2 {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0;
    font-size: clamp(42px, 7vw, 88px);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 0.98;
}

.service-cta p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.8;
}

.service-cta .button,
.service-cta .button-dark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 32px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color 200ms ease,
        color 200ms ease;
}

.service-cta .button:hover,
.service-cta .button-dark:hover {
    background: #fff;
    color: var(--text);
}


/* ---------------------------------------------------------
   8. DARK MODE
   Nutzt data-theme="dark" am HTML-Element.
   --------------------------------------------------------- */

html[data-theme="dark"] .visual-composition {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .design-principle {
    background: #0e100e;
}

html[data-theme="dark"] .design-principle p {
    color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] .service-cta {
    color: #fff;
}

html[data-theme="dark"] .service-cta .button,
html[data-theme="dark"] .service-cta .button-dark {
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
}

html[data-theme="dark"] .service-cta .button:hover,
html[data-theme="dark"] .service-cta .button-dark:hover {
    background: #fff;
    color: #171916;
}


/* ---------------------------------------------------------
   9. RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
    .service-hero {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
        gap: 36px;
        min-height: auto;
    }

    .service-hero h1 {
        font-size: clamp(52px, 8vw, 82px);
    }

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

    .section-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

    .process-step:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .related-services {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* ---------------------------------------------------------
   10. RESPONSIVE — MOBIL
   --------------------------------------------------------- */

@media (max-width: 640px) {
    .service-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: 70px;
        padding-bottom: 76px;
    }

    .service-hero h1 {
        font-size: clamp(48px, 14vw, 76px);
    }

    .service-hero p {
        margin-top: 24px;
        font-size: 16px;
    }

    .service-visual {
        width: min(100%, 400px);
        justify-self: center;
    }

    .composition-type {
        font-size: clamp(56px, 17vw, 78px);
    }

    .service-section,
    .process-section {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .section-heading {
        gap: 20px;
        margin-bottom: 38px;
    }

    .section-heading h2 {
        font-size: clamp(36px, 10vw, 52px);
    }

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

    .service-card {
        min-height: 0;
        padding: 28px 24px 32px;
    }

    .service-number {
        margin-bottom: 26px;
    }

    .design-principle {
        min-height: 0;
        padding: 72px 26px;
    }

    .design-principle h2 {
        font-size: clamp(42px, 12vw, 64px);
    }

    .design-principle::after {
        right: -40%;
        bottom: -20%;
        width: 90vw;
    }

    .process-section .section-heading {
        margin-bottom: 42px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .process-step,
    .process-step + .process-step {
        padding: 26px 0;
        border-left: 0;
        border-bottom: 1px solid var(--border);
    }

    .process-step:first-child {
        padding-top: 30px;
    }

    .process-step .step-number {
        margin-bottom: 20px;
    }

    .related-services {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .service-cta {
        padding: 58px 26px;
    }

    .service-cta h2 {
        font-size: clamp(42px, 12vw, 64px);
    }
}


/* ---------------------------------------------------------
   11. BEWEGUNGSREDUKTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .visual-frame,
    .service-card,
    .related-service-link,
    .related-service-link .link-arrow,
    .service-cta .button,
    .service-cta .button-dark {
        transition: none;
    }
}



/* =========================================================
   GRAFIKDESIGN – SEITENABSTÄNDE UND LAYOUT
   Einheitlich mit index.html über style.css / .container
   ========================================================= */

/*
   Die globalen .container-Regeln aus style.css übernehmen
   max-width, Außenpositionierung und horizontale Innenabstände.
   Hier keine zweite Container-Geometrie definieren.
*/

/* ---------------------------------------------------------
   1. HERO
   Die äußere Sektion bleibt über die gesamte Seitenbreite.
   Das eigentliche Grid liegt auf dem inneren Container.
   --------------------------------------------------------- */

.service-hero {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.service-hero > .service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
  min-width: 0;
}

.service-hero-copy,
.service-visual {
  min-width: 0;
}

/* ---------------------------------------------------------
   2. ABSCHNITTE
   Hintergründe und Rahmen laufen über die gesamte Breite.
   Der Inhalt wird durch .container aus style.css begrenzt.
   --------------------------------------------------------- */

.service-section,
.design-principle,
.process-section,
.related-services,
.service-cta {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Keine zusätzlichen horizontalen Abstände auf den Sektionen */
.service-section,
.design-principle,
.process-section,
.related-services,
.service-cta {
  padding-inline: 0;
}

/* Die Container behalten die zentrale Seitengeometrie */
.service-hero > .container,
.service-section > .container,
.design-principle > .container,
.process-section > .container,
.related-services > .container,
.service-cta > .container {
  width: 100%;
  max-width: calc(var(--container, 1240px) + var(--page-gutter, clamp(22px, 5.5vw, 88px)) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter, clamp(22px, 5.5vw, 88px));
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   3. GESTALTUNGSPRINZIP
   Hintergrund vollflächig, Text innerhalb des Containers.
   --------------------------------------------------------- */

.design-principle {
  display: block;
}

.design-principle > .design-principle-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(40px, 8vw, 120px);
  min-width: 0;
}

.design-principle-grid > * {
  min-width: 0;
}

/* ---------------------------------------------------------
   4. VERWANDTE LEISTUNGEN
   Das Layout gehört zum inneren Inhalt, nicht zur Sektion.
   --------------------------------------------------------- */

.related-services {
  display: block;
}

.related-services > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(40px, 8vw, 120px);
  min-width: 0;
}

/* ---------------------------------------------------------
   5. CTA
   Vollflächiger Hintergrund; Inhalt bleibt im Container.
   --------------------------------------------------------- */

.service-cta {
  display: block;
}

.service-cta > .service-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

/* ---------------------------------------------------------
   6. ÜBERLAUF UND GRID-SICHERHEIT
   --------------------------------------------------------- */

.grafikdesign-page main,
.grafikdesign-page main > section,
.service-hero-grid,
.section-heading,
.service-grid,
.process-grid,
.related-grid,
.service-cta-inner {
  min-width: 0;
  box-sizing: border-box;
}

.service-card,
.process-step,
.related-card,
.service-cta-inner > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   7. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .service-hero > .service-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 36px;
  }

  .design-principle > .design-principle-grid,
  .related-services > .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .service-hero > .service-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .service-hero {
    min-height: auto;
  }

  .service-visual {
    justify-self: center;
    width: min(100%, 400px);
  }

  .design-principle > .design-principle-grid,
  .related-services > .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}