/* MY IT-SERVICE: Design-Grundlage (unverändert übernommen, Überschrift als Klasse .mi-title) */
@font-face {
        font-family: "Manrope";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("fonts/manrope-400.woff2")
          format("woff2");
      }
      @font-face {
        font-family: "Manrope";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/manrope-700.woff2")
          format("woff2");
      }
      @font-face {
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("fonts/space-grotesk-500.woff2")
          format("woff2");
      }
      @font-face {
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/space-grotesk-700.woff2")
          format("woff2");
      }

      #myit-design {
        --mi-bg: #080b10;
        --mi-ink: #f5f7fb;
        --mi-muted: #9299a7;
        --mi-accent: #a8f0c1;
        --mi-blue: #5b79ff;
        font:
          16px/1.65 "Manrope",
          system-ui,
          sans-serif;
        background: var(--mi-bg);
        color: var(--mi-ink);
        position: relative;
        isolation: isolate;
        max-width: 1400px;
        margin-inline: auto;
      }
      #myit-design * {
        box-sizing: border-box;
      }
      #myit-design button,
      #myit-design a {
        font: inherit;
      }
      #myit-design button {
        cursor: pointer;
      }
      #myit-design a {
        color: inherit;
        text-decoration: none;
      }
      #myit-design button:focus-visible,
      #myit-design a:focus-visible {
        outline: 2px solid var(--mi-accent);
        outline-offset: 5px;
      }
      #myit-design .mi-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 5%;
        padding: 25px 0;
        border-bottom: 1px solid #ffffff14;
        gap: 20px;
        position: relative;
        z-index: 3;
      }
      #myit-design .mi-brand {
        font-family: "Space Grotesk", system-ui, sans-serif;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.8px;
        white-space: nowrap;
        display: flex;
        gap: 10px;
        align-items: center;
      }
      #myit-design .mi-mark {
        width: 27px;
        height: 27px;
        border: 1px solid var(--mi-accent);
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--mi-accent);
        font-size: 20px;
        transform: rotate(-8deg);
      }
      #myit-design .mi-links {
        display: flex;
        align-items: center;
        gap: 25px;
        font-size: 14px;
        color: #c8ccd5;
      }
      #myit-design .mi-nav-cta {
        border: 1px solid #ffffff30;
        border-radius: 30px;
        padding: 9px 18px;
        background: transparent;
        color: var(--mi-ink);
      }
      #myit-design .mi-hero {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        position: relative;
        padding: 85px 5% 65px;
        min-height: 600px;
        gap: 15px;
        align-items: center;
      }
      #myit-design .mi-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          ellipse at 83% 48%,
          #2845b823,
          transparent 52%
        );
      }
      #myit-design .mi-copy {
        position: relative;
        z-index: 2;
        animation: mi-enter 0.9s both;
      }
      #myit-design .mi-eyebrow {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 12px;
        letter-spacing: 2px;
        color: var(--mi-muted);
        text-transform: uppercase;
        margin-bottom: 23px;
      }
      #myit-design .mi-dot {
        width: 6px;
        height: 6px;
        display: inline-block;
        background: var(--mi-accent);
        box-shadow: 0 0 14px #a8f0c166;
        border-radius: 50%;
      }
      #myit-design .mi-title {
        font-family: "Space Grotesk", system-ui, sans-serif;
        font-size: clamp(36px, 5.7vw, 65px);
        line-height: 1.06;
        letter-spacing: -3px;
        font-weight: 500;
        margin: 0 0 25px;
      }
      #myit-design .mi-title span {
        color: var(--mi-accent);
      }
      #myit-design .mi-description {
        font-size: 16px;
        color: #a6adba;
        max-width: 370px;
        line-height: 1.9;
        margin: 0 0 28px;
      }
      #myit-design .mi-actions {
        display: flex;
        gap: 19px;
        align-items: center;
        flex-wrap: wrap;
      }
      #myit-design .mi-primary {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 13px 20px;
        background: var(--mi-accent);
        color: #10251b;
        border: 0;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 700;
        transition:
          box-shadow 0.3s,
          transform 0.3s;
      }
      #myit-design .mi-primary:hover {
        box-shadow: 0 0 35px #a8f0c13a;
        transform: translateY(-2px);
      }
      #myit-design .mi-subtle {
        font-size: 14px;
        color: #c8ccd5;
      }
      #myit-design .mi-scene {
        height: 400px;
        position: relative;
        min-width: 0;
        perspective: 850px;
        animation: mi-enter 1.2s 0.15s both;
      }
      #myit-design canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      #myit-design .mi-floor {
        position: absolute;
        width: 100%;
        height: 65%;
        left: 0;
        top: 45%;
        transform: rotateX(67deg);
        background-image:
          linear-gradient(#5b79ff19 1px, transparent 1px),
          linear-gradient(90deg, #5b79ff19 1px, transparent 1px);
        background-size: 30px 30px;
        mask-image: radial-gradient(ellipse, #000 10%, transparent 68%);
      }
      #myit-design .mi-halo {
        position: absolute;
        width: 280px;
        height: 280px;
        border: 1px solid #5b79ff24;
        border-radius: 50%;
        top: 44px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow:
          0 0 80px #4767e712,
          inset 0 0 80px #4767e710;
      }
      #myit-design .mi-halo:after {
        content: "";
        position: absolute;
        inset: -25px;
        border: 1px dashed #a8f0c11c;
        border-radius: 50%;
        animation: mi-orbit 65s linear infinite;
      }
      #myit-design .mi-orb {
        position: absolute;
        inset: 13px;
        animation: mi-orbit 14s linear infinite;
        border-radius: 50%;
      }
      #myit-design .mi-orb:before {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        background: var(--mi-accent);
        border-radius: 50%;
        top: 17px;
        left: 30px;
        box-shadow: 0 0 18px var(--mi-accent);
      }
      #myit-design .mi-rack-position {
        position: absolute;
        left: 50%;
        top: 65px;
        transform: translateX(-50%);
        width: 155px;
        height: 252px;
      }
      #myit-design .mi-rack {
        width: 155px;
        height: 252px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(12deg) rotateY(-26deg);
        animation: mi-hover 7s ease-in-out infinite;
      }
      #myit-design .mi-front {
        position: absolute;
        inset: 0;
        border: 1px solid #6d829b70;
        border-radius: 10px;
        background: linear-gradient(120deg, #2a3446, #141c2a 55%, #1c2634);
        box-shadow:
          0 30px 70px #0008,
          inset 0 1px 0 #fff3;
        padding: 20px 11px;
        backface-visibility: visible;
      }
      #myit-design .mi-side {
        position: absolute;
        top: 0;
        left: 155px;
        width: 55px;
        height: 252px;
        transform-origin: left;
        transform: rotateY(90deg);
        background: linear-gradient(90deg, #0c121c, #1c2738);
        border: 1px solid #6d829b45;
        border-radius: 0 9px 9px 0;
      }
      #myit-design .mi-top {
        position: absolute;
        left: 0;
        top: -55px;
        width: 155px;
        height: 55px;
        transform-origin: bottom;
        transform: rotateX(90deg);
        background: linear-gradient(130deg, #526179, #263346);
        border: 1px solid #8493aa50;
        border-radius: 7px 7px 0 0;
      }
      #myit-design .mi-unit {
        height: 43px;
        margin-bottom: 9px;
        border: 1px solid #687b9840;
        border-radius: 5px;
        background: linear-gradient(115deg, #192436, #0d1520);
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 10px;
        box-shadow: inset 0 1px 0 #ffffff08;
        position: relative;
      }
      #myit-design .mi-unit:after {
        content: "";
        width: 35px;
        height: 14px;
        margin-left: auto;
        background: repeating-linear-gradient(
          90deg,
          #53667d77 0 1px,
          transparent 1px 4px
        );
      }
      #myit-design .mi-led {
        width: 4px;
        height: 4px;
        background: var(--mi-accent);
        border-radius: 50%;
        box-shadow: 0 0 7px var(--mi-accent);
        animation: mi-blink 3s infinite;
      }
      #myit-design .mi-led:nth-child(2) {
        animation-delay: 0.6s;
      }
      #myit-design .mi-unit:nth-child(2) .mi-led {
        animation-delay: 1.2s;
      }
      #myit-design .mi-unit:nth-child(3) .mi-led {
        animation-delay: 2s;
      }
      #myit-design .mi-rack-sign {
        font:
          8px "Space Grotesk",
          system-ui,
          sans-serif;
        letter-spacing: 3px;
        color: #92a4bd;
        text-align: center;
        margin-top: 18px;
      }
      #myit-design .mi-rack-line {
        height: 2px;
        width: 35%;
        margin: 10px auto 0;
        background: var(--mi-accent);
        box-shadow: 0 0 20px #a8f0c180;
      }
      #myit-design .mi-float {
        position: absolute;
        z-index: 3;
        border: 1px solid #71819f33;
        box-shadow: 0 20px 40px #0004;
        background: #121b2bec;
        backdrop-filter: blur(10px);
        border-radius: 10px;
        padding: 12px 15px;
        animation: mi-bob 6s ease-in-out infinite;
        font-size: 12px;
        min-width: 132px;
      }
      #myit-design .mi-float-label {
        display: block;
        color: #a1adc1;
        font-size: 12px;
        letter-spacing: 1.7px;
        margin-bottom: 5px;
      }
      #myit-design .mi-float-value {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #dce6f6;
      }
      #myit-design .mi-float-a {
        left: -6px;
        top: 75px;
        transform: rotate(-5deg);
      }
      #myit-design .mi-float-b {
        right: -8px;
        top: 215px;
        animation-delay: -3s;
      }
      #myit-design .mi-scene-caption {
        position: absolute;
        bottom: 3px;
        left: 0;
        right: 0;
        text-align: center;
        color: #a1adc1;
        font:
          9px "Space Grotesk",
          system-ui,
          sans-serif;
        letter-spacing: 2px;
      }
      #myit-design .mi-cross {
        position: absolute;
        color: #5b79ff88;
        font-size: 20px;
      }
      #myit-design .mi-cross-a {
        right: 25px;
        top: 45px;
      }
      #myit-design .mi-cross-b {
        left: 25px;
        bottom: 65px;
      }
      #myit-design .mi-systembar {
        margin: 0 5%;
        padding: 18px 0;
        border-top: 1px solid #ffffff14;
        border-bottom: 1px solid #ffffff14;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        color: var(--mi-muted);
        font-size: 12px;
      }
      #myit-design .mi-systembar span {
        letter-spacing: 1px;
      }
      #myit-design .mi-pause {
        color: #909baa;
        font-size: 12px;
        border: 0;
        background: none;
        padding: 4px 0;
        white-space: nowrap;
      }
      #myit-design .mi-services {
        padding: 52px 5% 40px;
      }
      #myit-design .mi-section-top {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 20px;
        margin-bottom: 25px;
      }
      #myit-design .mi-section-top h2 {
        font:
          500 28px/1.2 "Space Grotesk",
          system-ui,
          sans-serif;
        letter-spacing: -1px;
        margin: 0;
      }
      #myit-design .mi-section-top p {
        margin: 0;
        color: var(--mi-muted);
        font-size: 12px;
      }
      #myit-design .mi-services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      #myit-design .mi-service {
        position: relative;
        text-align: left;
        padding: 23px 20px;
        border: 1px solid #ffffff14;
        border-radius: 10px;
        background: linear-gradient(145deg, #131b28, #0c1119);
        color: var(--mi-ink);
        transition:
          transform 0.35s,
          border-color 0.35s,
          background 0.35s;
        overflow: hidden;
      }
      #myit-design .mi-service:hover {
        transform: translateY(-5px);
        border-color: #a8f0c166;
      }
      #myit-design .mi-service[aria-pressed="true"] {
        border-color: #a8f0c166;
        background: linear-gradient(145deg, #172d2c, #0d151b);
      }
      #myit-design .mi-service-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 26px;
        color: var(--mi-accent);
      }
      #myit-design .mi-service svg {
        width: 23px;
        height: 23px;
      }
      #myit-design .mi-service-num {
        font:
          10px "Space Grotesk",
          system-ui,
          sans-serif;
        color: #a1adc1;
      }
      #myit-design .mi-service-title {
        display: block;
        font:
          500 20px "Space Grotesk",
          system-ui,
          sans-serif;
        margin-bottom: 8px;
      }
      #myit-design .mi-service-desc {
        display: block;
        color: #909baa;
        font-size: 14px;
        line-height: 1.8;
        min-height: 36px;
      }
      #myit-design .mi-end {
        margin: 0 5%;
        padding: 15px 0 22px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        color: #a1adc1;
        font-size: 12px;
        letter-spacing: 1px;
      }
      #myit-design .mi-contact {
        margin: 0 5% 25px;
        padding: 25px;
        background: #13221d;
        border: 1px solid #a8f0c144;
        border-radius: 9px;
      }
      #myit-design .mi-contact h2 {
        font:
          500 23px "Space Grotesk",
          system-ui,
          sans-serif;
        margin: 0 0 9px;
      }
      #myit-design .mi-contact p {
        font-size: 12px;
        color: #b3c1ba;
        margin: 0 0 12px;
      }
      #myit-design .mi-contact a {
        color: var(--mi-accent);
      }
      @keyframes mi-orbit {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes mi-hover {
        0%,
        100% {
          transform: translateY(0) rotateX(12deg) rotateY(-26deg);
        }
        50% {
          transform: translateY(-15px) rotateX(9deg) rotateY(-17deg);
        }
      }
      @keyframes mi-bob {
        0%,
        100% {
          translate: 0 0;
        }
        50% {
          translate: 0 -10px;
        }
      }
      @keyframes mi-blink {
        0%,
        40%,
        100% {
          opacity: 1;
        }
        50%,
        60% {
          opacity: 0.25;
        }
      }
      @keyframes mi-enter {
        from {
          opacity: 0;
          translate: 0 20px;
        }
        to {
          opacity: 1;
          translate: 0 0;
        }
      }
      @media (max-width: 720px) {
        #myit-design .mi-hero {
          padding-top: 48px;
          grid-template-columns: 1fr;
          gap: 10px;
        }
        #myit-design .mi-title {
          font-size: 52px;
          letter-spacing: -2px;
        }
        #myit-design .mi-description {
          max-width: 430px;
        }
        #myit-design .mi-scene {
          width: min(100%, 430px);
          margin: auto;
          height: 390px;
        }
        #myit-design .mi-links > a {
          display: none;
        }
        #myit-design .mi-section-top {
          align-items: start;
          flex-direction: column;
          gap: 8px;
        }
        #myit-design .mi-systembar {
          flex-wrap: wrap;
          gap: 12px;
        }
        #myit-design .mi-services-grid {
          grid-template-columns: 1fr;
        }
        #myit-design .mi-service-top {
          margin-bottom: 15px;
        }
        #myit-design .mi-service-desc {
          min-height: 0;
        }
        #myit-design .mi-end {
          flex-wrap: wrap;
        }
        #myit-design .mi-float-a {
          left: 0;
        }
        #myit-design .mi-float-b {
          right: 0;
        }
        #myit-design .mi-nav {
          gap: 8px;
        }
        #myit-design .mi-brand {
          font-size: 15px;
        }
        #myit-design .mi-nav-cta {
          padding: 8px 12px;
          font-size: 12px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #myit-design *,
        #myit-design *:before,
        #myit-design *:after {
          animation: none !important;
          transition: none !important;
        }
      }

      /* Standalone document, keyboard access and progressive enhancement. */
      html {
        color-scheme: dark;
        scroll-behavior: smooth;
        scroll-padding-top: 1.5rem;
      }
      body {
        margin: 0;
        background: #080b10;
      }
      [hidden] {
        display: none !important;
      }
      #myit-design a,
      #myit-design button {
        -webkit-tap-highlight-color: transparent;
      }
      #myit-design button,
      #myit-design .mi-nav a,
      #myit-design .mi-actions a,
      #myit-design .mi-contact a,
      #myit-design .mi-end a {
        min-height: 44px;
      }
      #myit-design .mi-nav a,
      #myit-design .mi-subtle,
      #myit-design .mi-contact a,
      #myit-design .mi-end a {
        display: inline-flex;
        align-items: center;
      }
      #myit-design .mi-primary {
        font-size: 14px;
      }
      #myit-design .mi-brand-dot {
        color: var(--mi-accent);
      }
      #myit-design .mi-service-desc {
        font-size: 14px;
      }
      #myit-design .mi-service[aria-pressed="true"] .mi-service-num::before {
        content: "✓ ";
        color: var(--mi-accent);
      }
      #myit-design .mi-nav-cta {
        display: inline-flex;
        align-items: center;
      }
      #myit-design .mi-scene {
        overflow: clip;
      }
      #myit-design .mi-float {
        min-width: 150px;
      }
      #myit-design .mi-float-label {
        font-size: 10px;
        letter-spacing: 1px;
      }
      #myit-design .mi-float-b {
        right: 0;
      }
      #myit-design .mi-float-a {
        left: 0;
      }
      #myit-design .mi-end {
        align-items: center;
        flex-wrap: wrap;
        font-size: 12px;
      }
      #myit-design .mi-legal {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
      }
      #myit-design .mi-contact {
        scroll-margin-top: 1.5rem;
      }
      #myit-design .mi-contact p {
        font-size: 16px;
      }
      #myit-design .mi-pause:disabled {
        cursor: default;
        opacity: 1;
      }
      #myit-design .mi-copy,
      #myit-design .mi-scene {
        animation: none;
      }
      #myit-design:not(.mi-motion) *,
      #myit-design:not(.mi-motion) *::before,
      #myit-design:not(.mi-motion) *::after {
        animation-play-state: paused;
      }
      #myit-design.mi-motion *,
      #myit-design.mi-motion *::before,
      #myit-design.mi-motion *::after {
        animation-play-state: running;
      }
      .mi-skip {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        padding: 12px 18px;
        background: #a8f0c1;
        color: #10251b;
        transform: translateY(-180%);
      }
      .mi-skip:focus {
        transform: translateY(0);
      }
      .mi-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }
      @media (max-width: 720px) {
        #myit-design .mi-hero {
          padding-block: 42px 35px;
        }
        #myit-design .mi-title {
          font-size: clamp(2.1rem, 8vw, 3.25rem);
        }
        #myit-design .mi-nav {
          flex-wrap: wrap;
        }
        #myit-design .mi-links {
          gap: 12px;
        }
        #myit-design .mi-systembar {
          column-gap: 20px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        #myit-design *,
        #myit-design *::before,
        #myit-design *::after {
          animation: none !important;
          transition: none !important;
        }
        #myit-design .mi-service:hover,
        #myit-design .mi-primary:hover {
          transform: none;
        }
      }
      @media (forced-colors: active) {
        #myit-design {
          color: CanvasText;
          background: Canvas;
        }
        #myit-design .mi-primary,
        #myit-design .mi-service,
        #myit-design .mi-nav-cta {
          color: ButtonText;
          background: ButtonFace;
          border: 1px solid ButtonText;
        }
        #myit-design .mi-service[aria-pressed="true"] {
          border: 3px solid Highlight;
        }
        #myit-design .mi-scene {
          display: none;
        }
      }

/* ===== Ergänzungen für Unterseiten, Formular und Inhalte ===== */
#myit-design h1.mi-eyebrow { font-family: inherit; font-weight: 400; line-height: 1.4; margin: 0 0 23px; }
#myit-design .mi-service { display: block; }
#myit-design .mi-service.is-active { border-color: #a8f0c166; background: linear-gradient(145deg, #172d2c, #0d151b); }
#myit-design .mi-service-more { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: 1px; color: var(--mi-accent); }
#myit-design .mi-links { flex-wrap: wrap; }
#myit-design .mi-links a[aria-current="page"] { color: var(--mi-ink); }

#myit-design .mi-page-hero { position: relative; display: grid; grid-template-columns: 1.35fr .9fr; gap: 40px; align-items: start; padding: 55px 5% 40px; }
#myit-design .mi-page-hero:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 30%, #2845b81c, transparent 50%); }
#myit-design .mi-page-hero > * { position: relative; }
#myit-design .mi-title-sub { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -2px; }
#myit-design .mi-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--mi-muted); margin-bottom: 26px; letter-spacing: .5px; }
#myit-design .mi-crumbs a { min-height: 0; color: #c8ccd5; }
#myit-design .mi-crumbs a:hover { color: var(--mi-accent); }
#myit-design .mi-glance { border: 1px solid #71819f33; background: #121b2bec; border-radius: 10px; padding: 20px; box-shadow: 0 20px 40px #0004; }
#myit-design .mi-glance .mi-float-label { margin-bottom: 8px; }
#myit-design .mi-glance ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: #c8ccd5; }
#myit-design .mi-glance li { display: flex; gap: 10px; align-items: baseline; }
#myit-design .mi-glance li:before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--mi-accent); box-shadow: 0 0 10px #a8f0c166; transform: translateY(-2px); }

#myit-design .mi-content { padding: 20px 5% 30px; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 50px; }
#myit-design .mi-prose h2 { font: 500 24px/1.25 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.6px; margin: 34px 0 12px; }
#myit-design .mi-prose h2:first-child { margin-top: 0; }
#myit-design .mi-prose p { color: #b9c0cc; line-height: 1.85; margin: 0 0 14px; }
#myit-design .mi-prose a { color: var(--mi-accent); }
#myit-design .mi-checked { font-size: 12px; color: var(--mi-muted); letter-spacing: .5px; margin-top: 28px; }
#myit-design .mi-aside { display: grid; gap: 14px; align-content: start; }

#myit-design .mi-faq { border-top: 1px solid #ffffff14; }
#myit-design .mi-faq:last-of-type { border-bottom: 1px solid #ffffff14; }
#myit-design .mi-faq summary { list-style: none; cursor: pointer; padding: 16px 30px 16px 0; position: relative; font: 500 17px/1.4 "Space Grotesk", system-ui, sans-serif; }
#myit-design .mi-faq summary::-webkit-details-marker { display: none; }
#myit-design .mi-faq summary:after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--mi-accent); font-size: 20px; }
#myit-design .mi-faq[open] summary:after { content: "–"; }
#myit-design .mi-faq summary:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 4px; }
#myit-design .mi-faq p { margin: 0 0 16px; }

#myit-design .mi-author { display: flex; gap: 16px; align-items: center; border: 1px solid #ffffff14; border-radius: 10px; background: linear-gradient(145deg, #131b28, #0c1119); padding: 18px; }
#myit-design .mi-author img, #myit-design .mi-initials { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; border: 1px solid #a8f0c155; }
#myit-design .mi-initials { display: grid; place-items: center; font: 700 20px "Space Grotesk", system-ui, sans-serif; color: var(--mi-accent); background: #13221d; }
#myit-design .mi-author small { display: block; font-size: 10px; letter-spacing: 1.5px; color: #a1adc1; text-transform: uppercase; margin-bottom: 3px; }
#myit-design .mi-author strong { display: block; font: 500 17px "Space Grotesk", system-ui, sans-serif; }
#myit-design .mi-author > div > span { display: block; font-size: 13px; color: #a6adba; line-height: 1.6; }
#myit-design .mi-author a { color: var(--mi-accent); font-size: 13px; min-height: 0; display: inline-block; margin-top: 4px; }

#myit-design .mi-contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; }
#myit-design .mi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; }
#myit-design .mi-field { display: grid; gap: 6px; }
#myit-design .mi-field-wide { grid-column: 1 / -1; }
#myit-design .mi-field label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #b3c1ba; }
#myit-design .mi-field input, #myit-design .mi-field select, #myit-design .mi-field textarea { font: inherit; font-size: 15px; color: var(--mi-ink); background: #0b1512; border: 1px solid #a8f0c130; border-radius: 7px; padding: 11px 12px; min-height: 44px; width: 100%; }
#myit-design .mi-field textarea { resize: vertical; min-height: 120px; }
#myit-design .mi-field input:focus, #myit-design .mi-field select:focus, #myit-design .mi-field textarea:focus { outline: 2px solid var(--mi-accent); outline-offset: 1px; border-color: transparent; }
#myit-design .mi-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #b3c1ba; }
#myit-design .mi-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: #a8f0c1; flex: 0 0 auto; }
#myit-design .mi-check a { color: var(--mi-accent); min-height: 0; display: inline; }
#myit-design .mi-form .mi-primary { justify-self: start; min-height: 44px; }
#myit-design .mi-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
#myit-design .mi-side-box { border-left: 1px solid #a8f0c133; padding-left: 26px; display: grid; gap: 14px; align-content: start; font-size: 14px; color: #b3c1ba; }
#myit-design .mi-side-box strong { display: block; font: 500 16px "Space Grotesk", system-ui, sans-serif; color: var(--mi-ink); }
#myit-design .mi-side-box .mi-primary { justify-self: start; }
#myit-design .mi-contact a.mi-primary { color: #10251b; }
#myit-design .mi-notice { border-radius: 7px; padding: 12px 14px; font-size: 14px; margin: 12px 0 0; }
#myit-design .mi-notice-ok { background: #a8f0c11a; border: 1px solid #a8f0c166; color: #dff8e8; }
#myit-design .mi-notice-err { background: #f5c7a014; border: 1px solid #f5c7a066; color: #f8e3d1; }

#myit-design .mi-block { padding: 30px 5%; }
#myit-design .mi-block > h2 { font: 500 28px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -1px; margin: 0 0 20px; }
#myit-design .mi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: schritt; }
#myit-design .mi-step { border: 1px solid #ffffff14; border-radius: 10px; background: linear-gradient(145deg, #131b28, #0c1119); padding: 20px; counter-increment: schritt; }
#myit-design .mi-step:before { content: "0" counter(schritt) " /"; display: block; font: 10px "Space Grotesk", system-ui, sans-serif; color: #a1adc1; margin-bottom: 18px; letter-spacing: 1px; }
#myit-design .mi-step strong { display: block; font: 500 18px "Space Grotesk", system-ui, sans-serif; margin-bottom: 6px; }
#myit-design .mi-step span { color: #909baa; font-size: 14px; line-height: 1.75; }
#myit-design .mi-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
#myit-design .mi-chips li { border: 1px solid #71819f44; border-radius: 30px; padding: 6px 13px; font-size: 13px; color: #c8ccd5; background: #0f1622; }
#myit-design .mi-certs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
#myit-design .mi-certs li { border: 1px solid #ffffff14; border-radius: 8px; padding: 12px 15px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#myit-design .mi-certs small { color: var(--mi-muted); font-size: 13px; }
#myit-design .mi-portrait { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid #71819f44; box-shadow: 0 20px 40px #0005; }
#myit-design .mi-portrait-empty { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; border-radius: 12px; border: 1px dashed #71819f55; display: grid; place-items: center; background: #0f1622; font: 700 54px "Space Grotesk", system-ui, sans-serif; color: var(--mi-accent); }
#myit-design .mi-facts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-size: 14px; color: #c8ccd5; }
#myit-design .mi-facts b { color: var(--mi-ink); font-weight: 700; }
#myit-design .mi-profile-links { display: flex; gap: 18px; flex-wrap: wrap; }
#myit-design .mi-profile-links a { color: var(--mi-accent); }

@media (max-width: 900px) {
  #myit-design .mi-content, #myit-design .mi-contact-grid { grid-template-columns: 1fr; }
  #myit-design .mi-steps { grid-template-columns: 1fr 1fr; }
  #myit-design .mi-side-box { border-left: 0; padding-left: 0; border-top: 1px solid #a8f0c133; padding-top: 20px; }
}
@media (max-width: 720px) {
  #myit-design .mi-page-hero { grid-template-columns: 1fr; padding-top: 36px; gap: 24px; }
  #myit-design .mi-form { grid-template-columns: 1fr; }
  #myit-design .mi-steps { grid-template-columns: 1fr; }
  #myit-design .mi-contact { padding: 20px; }
}

/* ===== Barrierefreiheit (WAVE): H1 aus Ortszeile und Slogan, keine Mini-Schriften, Deko-Kreuze ohne Text ===== */
#myit-design h1.mi-hero-h1 { margin: 0; font: inherit; }
#myit-design h1.mi-hero-h1 .mi-eyebrow { display: flex; }
#myit-design h1.mi-hero-h1 .mi-title { display: block; }
#myit-design .mi-cross { width: 14px; height: 14px; font-size: 0; }
#myit-design .mi-cross:before, #myit-design .mi-cross:after { content: ""; position: absolute; background: #5b79ff88; }
#myit-design .mi-cross:before { left: 6px; top: 0; width: 2px; height: 14px; }
#myit-design .mi-cross:after { left: 0; top: 6px; width: 14px; height: 2px; }
#myit-design .mi-rack-sign { font-size: 11px; letter-spacing: 2px; }
#myit-design .mi-scene-caption,
#myit-design .mi-float-label,
#myit-design .mi-service-num,
#myit-design .mi-author small,
#myit-design .mi-step:before { font-size: 11px; }
#myit-design .mi-check a { text-decoration: underline; text-underline-offset: 2px; }