/*
 * Eigene Anpassungen. Diese Datei lädt nach den übrigen Theme-Styles.
 * Farben und Typografie kommen aus Elementor → Website-Einstellungen.
 * Die unten gewünschten Regeln können direkt bearbeitet werden.
 */

body { font-family: var(--moto-font-text); font-weight: var(--moto-weight-text); color: var(--moto-text); }
:where(button, input, select, textarea) { font-family: inherit; }
body:not(.text-mode) #desk-app button.hotspot:not(#text-view):not(.paper-reading-button) {
  border: 1px solid #363b38 !important;
}
body:not(.text-mode) #desk-app #chat :is(button.chips, .chips button, button.chip),
body:not(.text-mode) #desk-app #chat :is(button[type="submit"], input[type="submit"], .form-inline button) {
  border-radius: 25px !important;
}
body:not(.text-mode) #desk-app #chat button.term-reset { border: 0 !important; }

.masthead .nav-group:is(:hover,:focus-within) .nav-submenu {
  max-height: 240px;
  overflow-y: auto;
}
.masthead .project-cta, .masthead .project-cta::after { transition: all .2s ease-in-out; }
.masthead .project-cta {
  --moto-cta-fill: var(--moto-surface);
  color: var(--moto-text) !important;
  background-color: var(--moto-cta-fill) !important;
}
.masthead .project-cta:is(:hover,:focus-visible) {
  --moto-cta-fill: var(--moto-secondary);
  color: var(--moto-on-dark) !important;
  background-color: var(--moto-cta-fill) !important;
}
.masthead .project-cta::after,
.masthead .project-cta:is(:hover,:focus-visible)::after {
  border-top-color: var(--moto-cta-fill) !important;
}
#monitor .all-projects-link { border-radius: 25px !important; }
#desk-app #chat .chat button.chip,
#desk-app #chat .form-inline :is(button,input[type="submit"]) {
  background: var(--moto-accent) !important;
  color: var(--moto-text) !important;
}
#desk-app #chat .chat button.chip:is(:hover,:focus-visible),
#desk-app #chat .form-inline :is(button,input[type="submit"]):is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--moto-accent) 72%, var(--moto-primary)) !important;
}

.text-mode .view-tools #back-desk::before,
.text-mode .view-tools #back-desk::after { content: none !important; display: none !important; }
.text-mode .view-tools #back-desk .desk-view-icon {
  display: block; width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

body #desk-app :is(.paper-body > .mini-nav, .device-page-nav, .chat-page-nav) {
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
body #desk-app :is(.paper-body > .mini-nav, .device-page-nav, .chat-page-nav) > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 15px; border-radius: 25px !important;
  border: 1px solid var(--moto-secondary) !important;
  background: transparent !important;
  color: var(--moto-text) !important;
  font-family: var(--moto-font-accent) !important;
  font-weight: var(--moto-weight-accent) !important;
  font-size: 12px !important;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
body #desk-app :is(.paper-body > .mini-nav, .device-page-nav, .chat-page-nav) > a:is(:hover,:focus-visible) {
  background: var(--moto-secondary) !important;
  border-color: var(--moto-secondary) !important;
  color: var(--moto-on-dark) !important;
}
body #desk-app :is(.paper-body > .mini-nav, .device-page-nav, .chat-page-nav) > a[href="#fragen"]:is(:hover,:focus-visible) {
  background: var(--moto-link-hover) !important;
  border-color: var(--moto-link-hover) !important;
  color: var(--moto-on-dark) !important;
}

.moto-elementor-paper.e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; min-width: 0; }
.moto-elementor-paper .mpc-editor-container.e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; min-width: 0; }
.moto-elementor-paper .mpc-editor-container:is(.paper-grid,.service-four,.team-cards) {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,195px),1fr));
  gap: 20px;
}
.moto-elementor-paper .mpc-editor-container.agency-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.moto-elementor-paper .mpc-editor-container.agency-actions > .elementor-widget { width: auto; }
.moto-elementor-paper .mpc-editor-container.service { padding: 20px; }
.moto-standalone .moto-standalone-paper { width: 100%; min-width: 0; }
.moto-standalone .moto-elementor-paper { width: 100%; }
.moto-standalone .moto-standalone-paper :is(img,svg,video) { max-width: 100%; }
.moto-standalone .moto-standalone-paper form :is(input,textarea,select) {
  background: var(--moto-surface); border: 1px solid var(--moto-secondary); color: var(--moto-text);
}
.moto-standalone .moto-standalone-paper form label { display: grid; gap: 4px; }
.moto-standalone .moto-standalone-paper form { display: grid; gap: 12px; }
.moto-standalone .contact-links .elementor-widget { width: auto; }
.moto-standalone #arbeitsweise .workflow-illustration { width: min(220px,100%); height: auto; margin: 0 auto; }
.moto-standalone #studio .studio-photos { grid-template-columns: repeat(auto-fit,minmax(min(100%,195px),1fr)); }
.moto-portfolio-widget .masonry-card[hidden], .moto-portfolio-widget .reference-filters[hidden] { display: none !important; }

.screen-face .term-tag:before
{
	color: var(--moto-accent) !important;
}

.term-dot
{
	background-color: var(--moto-accent) !important;
}

.masthead .nav-submenu a:hover, .masthead .nav-submenu a[aria-current]
{
	background: transparent !important;
	color: black !important;
}

@media (prefers-reduced-motion: reduce) {
  .masthead .project-cta, .masthead .project-cta::after { transition: none; }
}

/* Responsive Ansichten: Schreibtisch, Referenzen und Projektseiten. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  body:not(.text-mode).device-ready #desk-app #monitor.active {
    --reference-top: calc(max(88px, env(safe-area-inset-top, 0px) + 72px) + var(--reference-admin-offset, 0px));
    top: var(--reference-top);
    left: clamp(12px, 4vw, 36px);
    width: calc(100% - 2 * clamp(12px, 4vw, 36px)) !important;
    height: calc(100svh - var(--reference-top) - 154px - env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    border-radius: 12px;
  }

  body.admin-bar #desk-app #monitor.active {
    --reference-admin-offset: var(--wp-admin--admin-bar--height, 32px);
  }

  body:not(.text-mode) #monitor.active .reference-screen {
    --reference-inset: clamp(14px, 3.5vw, 28px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto 3px;
    gap: 8px;
    padding: 10px var(--reference-inset) 12px;
  }

  body:not(.text-mode) #monitor.active .reference-screen > .reel {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
  }

  body:not(.text-mode) #monitor.active .reference-screen .reel-bar {
    flex: 0 0 44px;
    padding-right: 140px;
  }

  body:not(.text-mode) #monitor.active .reference-screen > .all-projects-link {
    top: 10px;
    right: var(--reference-inset);
    min-height: 44px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide {
    grid-template: minmax(0, 1fr) / minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 8px 2px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide-img {
    height: auto;
    aspect-ratio: 4 / 3;
    min-width: 0;
    max-height: 100%;
    box-shadow: none;
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide-txt {
    gap: 6px;
    justify-content: start;
    min-width: 0;
  }

  body:not(.text-mode) #monitor.active .slide-txt :is(.reel-count, .slide-kicker, h2, p) {
    margin: 0;
    max-width: none;
  }

  body:not(.text-mode) #monitor.active .slide-txt h2 {
    font-size: clamp(19px, 4.8vw, 25px);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  body:not(.text-mode) #monitor.active .slide-txt p {
    font-size: 14px;
    line-height: 1.45;
  }

  body:not(.text-mode) #monitor.active .project-view-link {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-height: 44px;
  }

  body:not(.text-mode) #monitor.active .reel-arrows {
    position: static;
    grid-row: 2;
    justify-self: end;
  }

  body:not(.text-mode) #monitor.active .reel-arrows button {
    width: 44px;
    height: 44px;
  }

  body:not(.text-mode) #monitor.active .reel-progress {
    position: static;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  body:not(.text-mode):not(.focused) #desk-app #hotspots {
    display: none;
  }

  body:not(.text-mode):not(.focused) #desk-app .intro-copy {
    left: 16px;
    bottom: calc(154px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 32px);
    max-width: 500px;
    max-height: calc(100svh - 243px - env(safe-area-inset-bottom, 0px));
    padding: clamp(16px, 4.5vw, 26px);
  }

  #desk-app .intro-copy h1 {
    font-size: clamp(25px, 7.6vw, 32px);
    line-height: 1.2;
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide {
    grid-template: auto auto / minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 10px;
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide-img {
    height: clamp(110px, 23svh, 245px);
    width: 100%;
    aspect-ratio: auto;
  }

  #desk-app .paper-body :is(.team-cards, .contact-links),
  #desk-app .reading-project-grid {
    overflow-wrap: anywhere;
  }

  #desk-app :is(.paper-body, .chat) :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
  }

  .moto-portfolio-page > .elementor-widget-spacer {
    display: none;
  }

  .moto-portfolio-page > .elementor-widget-shortcode {
    margin-bottom: 0;
  }

  .moto-portfolio-page .elementor-widget-loop-grid {
    --grid-row-gap: 32px;
  }

  .moto-portfolio-page .elementor-loop-container {
    row-gap: 32px;
  }

  .moto-portfolio-page .e-loop-item .elementor-button {
    min-height: 44px;
  }

  .reference-page .rank-math-breadcrumb {
    font-size: 13px;
    line-height: 1.45;
    hyphens: none;
    overflow-wrap: anywhere;
  }

  .single-portfolio .elementor-location-single > .e-con > .e-con > .elementor-widget-spacer:first-child {
    display: none;
  }

  .single-portfolio .elementor-widget-theme-post-content > .elementor > .e-con:first-child,
  .single-portfolio .elementor-widget-theme-post-content .e-con:has(> .elementor-widget-heading > h1),
  .single-portfolio .elementor-widget-theme-post-content .elementor-widget-heading:has(> h1) {
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    padding-inline: 0;
  }

  .single-portfolio .elementor-widget-theme-post-content > .elementor > .e-con:first-child {
    --padding-left: clamp(16px, 5vw, 32px);
    --padding-right: clamp(16px, 5vw, 32px);
    padding-inline: clamp(16px, 5vw, 32px);
  }

  .single-portfolio .elementor-widget-theme-post-content .e-con:has(> .elementor-widget-heading > h1) {
    margin-top: clamp(14px, 4vw, 28px);
  }

  .single-portfolio .elementor-widget-theme-post-content h1.elementor-heading-title {
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 1.17;
    hyphens: none;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  body:not(.text-mode) #monitor.active .slide-txt > p:not(.slide-kicker) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}

@media (max-width: 760px) and (max-height: 640px) {
  body:not(.text-mode) #monitor.active .reference-screen .slide {
    grid-template: auto / minmax(0, 0.55fr) minmax(0, 1fr);
  }

  body:not(.text-mode) #monitor.active .reference-screen .slide-img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Chat und Referenzen über die volle Breite der mobilen Schreibtischansicht. */
body.home .legal #motion-toggle {
  display: none;
}

@media (max-width: 760px) {
  body:not(.text-mode).device-ready #desk-app :is(#chat, #monitor).active,
  body:not(.text-mode) #desk-app :is(#chat, #monitor).moto-device-frame-measure {
    --device-top: calc(max(86px, env(safe-area-inset-top, 0px) + 72px) + var(--device-admin-offset, 0px));
    --device-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    left: 0;
    top: var(--device-top);
    width: 100% !important;
    height: calc(100svh - var(--device-top) - var(--device-bottom)) !important;
    transform: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 28px #151a1c20;
  }

  body.admin-bar #desk-app {
    --device-admin-offset: var(--wp-admin--admin-bar--height, 46px);
  }

  body:not(.text-mode).device-ready #desk-app:has(:is(#chat, #monitor).active) .bottom-controls {
    position: fixed;
    top: calc(100svh - 85px - env(safe-area-inset-bottom, 0px));
    bottom: auto;
  }

  body:not(.text-mode) #chat.active .chat-box {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body:not(.text-mode) #chat.active .chat {
    height: auto;
    min-height: 0;
    padding: 18px max(18px, env(safe-area-inset-right, 0px)) 20px max(18px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
  }

  body:not(.text-mode) #chat.active .chat-proof {
    position: static;
    padding: 10px max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px));
  }

  body:not(.text-mode) #monitor.active .reference-screen {
    --reference-inset: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }

  .masthead #main-menu {
    justify-content: flex-start;
    gap: 1px;
    padding: max(78px, env(safe-area-inset-top, 0px) + 68px) 20px 20px;
  }

  .masthead #main-menu > a,
  .masthead #main-menu > .nav-group > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 7px 15px;
    font-size: 17px;
    line-height: 1.25;
  }

  .masthead #main-menu .nav-group {
    flex-shrink: 0;
  }

  .masthead #main-menu .nav-submenu a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 5px 15px;
    font-size: 15px !important;
    line-height: 1.25;
  }
}

/* Mobile Startseite, Laptop-Rahmen und durchgehende Leseansicht. */
#desk-app .moto-intro-controls {
  display: none;
}

body.text-mode #desk-app :is(
  .intro-copy, .paper-face, .paper-body, .screen-face, .chat-box, .chat,
  .term-log, .chat-body, .reading-references, .reading-project-grid
) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none;
}

@media (orientation: landscape) and (max-width: 1024px) {
  body.text-mode #desk-app .view-tools {
    display: none;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  body:not(.text-mode):not(.focused) #desk-app .intro-copy.moto-intro-foldable {
    --intro-peek: 54px;
    --intro-bottom: calc(35px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    left: 16px;
    bottom: var(--intro-bottom);
    z-index: 13;
    max-width: none;
    max-height: calc(100svh - 145px - var(--intro-bottom));
    padding: 44px clamp(16px, 4.5vw, 26px) 20px;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateY(calc(100% - var(--intro-peek)));
    clip-path: inset(0 0 calc(100% - var(--intro-peek)) 0);
    transition: transform .36s ease, clip-path .36s ease;
  }

  body:not(.text-mode):not(.focused) #desk-app .intro-copy.moto-intro-expanded {
    transform: none;
    clip-path: inset(0);
  }

  body:not(.text-mode):not(.focused) #desk-app .intro-copy.moto-intro-foldable:not(.moto-intro-expanded) {
    overflow: hidden;
  }

  body:not(.text-mode):not(.focused) #desk-app .moto-intro-controls {
    position: absolute;
    inset: 0 0 auto;
    display: block;
  }

  #desk-app .moto-intro-controls .moto-intro-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 0;
    background: var(--moto-surface);
    color: var(--moto-text);
    text-align: left;
    font: var(--moto-weight-primary) clamp(13px, 4vw, 16px)/1.2 var(--moto-font-primary);
    border-radius: 0;
  }

  #desk-app .moto-intro-open::after {
    content: '↑';
    flex: none;
  }

  #desk-app .moto-intro-controls .moto-intro-close {
    position: absolute;
    top: 3px;
    right: 6px;
    display: none;
    place-items: center;
    width: 44px;
    height: 40px;
    padding: 0;
    color: var(--moto-text);
    background: transparent;
    border: 0;
    font-size: 22px;
  }

  #desk-app .moto-intro-expanded .moto-intro-open {
    display: none;
  }

  #desk-app .moto-intro-expanded .moto-intro-close {
    display: grid;
  }

  body:not(.text-mode):not(.focused) #desk-app:has(.moto-intro-expanded) .bottom-controls {
    visibility: hidden;
  }


  body:not(.text-mode).device-ready #desk-app :is(#chat, #monitor).active {
    border-block: 5px solid #17191b;
    box-shadow: none;
  }

  @media (prefers-reduced-motion: reduce) {
    body:not(.text-mode):not(.focused) #desk-app .intro-copy.moto-intro-foldable {
      transition: none;
    }
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  body:not(.text-mode) #desk-app .intro-copy .moto-intro-open {
    background-color: var(--moto-surface) !important;
    border-radius: 0 !important;
    font: var(--moto-weight-primary) clamp(13px, 4vw, 16px)/1.2 var(--moto-font-primary) !important;
  }

  #desk-app .moto-intro-open:focus-visible {
    outline-offset: -4px;
  }

  body:not(.text-mode) #desk-app .intro-copy .moto-intro-close {
    background-color: transparent !important;
    font-size: 21px !important;
  }

  body:not(.text-mode).device-ready:has(:is(#chat, #monitor).active) .legal a {
    color: #fff;
    text-shadow: 0 1px 3px #000;
  }
}

#monitor .reading-references .device-page-nav .home-arrow { display: none; }

/* Portfolio case study. Opt in by inserting the MOTO case-study container. */
body.single-portfolio .elementor-location-single:has(.moto-case-study) > .e-con > .e-con:has(> .elementor-widget-theme-post-featured-image),
body.single-portfolio .elementor-location-single:has(.moto-case-study) .elementor-element-937f3d0 > :is(.elementor-widget-spacer, .elementor-widget-shortcode),
body.single-portfolio .elementor-location-single:has(.moto-case-study) .elementor-element-b492489 {
  display: none !important;
}

body.single-portfolio .elementor-location-single:has(.moto-case-study) {
  background: #f8f8f5;
}

body.single-portfolio .elementor-location-single:has(.moto-case-study) :is(.elementor-element-af94dc1, .elementor-element-c168a16, .elementor-element-937f3d0, .elementor-widget-theme-post-content) {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  padding: 0;
  margin: 0;
  min-height: 0;
  background: transparent;
}

body.single-portfolio .elementor-location-single:has(.moto-case-study) .moto-case-study {
  --case-text: #1a1e1c;
  --case-muted: #4c5550;
  --case-line: #d8ddd7;
  --case-panel: #edf0eb;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 0px;
  display: flex;
  flex-direction: column;
  width: min(1240px, calc(100% - clamp(36px, 9vw, 132px)));
  max-width: none;
  padding: clamp(30px, 5vw, 72px) 0 clamp(60px, 9vw, 132px);
  margin: 0 auto;
  color: var(--case-text);
  font-size: 16px;
  text-align: left;
  hyphens: manual;
}

.moto-case-study .e-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 0px;
  padding: 0;
  min-width: 0;
}

.moto-case-study .elementor-widget { min-width: 0; }
.moto-case-study :is(h1, h2, h3, p) { margin: 0; }
.moto-case-study .elementor-widget-text-editor p + p { margin-top: 12px; }
.moto-case-study .elementor-widget-text-editor p { line-height: 1.62; }

.moto-case-study .case-back {
  margin-bottom: clamp(22px, 3.4vw, 48px);
  font-size: 13px;
}

.moto-case-study .case-back a { text-decoration: underline; text-underline-offset: 3px; }

.moto-case-study .case-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(28px, 5.2vw, 76px);
}

.moto-case-study .case-copy { gap: clamp(12px, 2vw, 23px); }

.moto-case-study .case-kicker {
  color: var(--case-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
}

body.single-portfolio .moto-case-study .case-title h1.elementor-heading-title {
  font-size: clamp(42px, 6.2vw, 94px);
  line-height: 1.01;
  letter-spacing: -.07em;
  overflow-wrap: anywhere;
}

.moto-case-study .case-deck {
  color: var(--case-muted);
  font-size: clamp(18px, 1.65vw, 23px);
  max-width: 35ch;
}

.moto-case-study :is(.case-hero-image, .case-sample-image) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 2vw, 22px);
  background: var(--case-panel);
}

.moto-case-study .case-link .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid #242925;
  border-radius: 99px;
  background: #242925;
  color: white;
  font-size: 14px;
}

.moto-case-study .case-link .elementor-button:is(:hover,:focus-visible) {
  background: white;
  color: #242925;
}

.moto-case-study .case-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px clamp(18px, 4vw, 58px);
  border-block: 1px solid var(--case-line);
  padding-block: 19px;
  margin-block: clamp(27px, 5.2vw, 72px);
}

.moto-case-study .case-fact strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--case-muted);
}

.moto-case-study .case-story,
.moto-case-study .case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(19px, 4vw, 52px);
}

.moto-case-study .case-story { margin-bottom: clamp(34px, 6vw, 84px); }
.moto-case-study .case-story-copy,
.moto-case-study .case-sample { gap: 10px; }

.moto-case-study .case-subtitle h2.elementor-heading-title {
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.moto-case-study .case-gallery-title { margin-bottom: 18px; }
.moto-case-study .case-caption { color: var(--case-muted); font-size: 13px; }

.moto-case-study .case-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 40px;
  margin-top: clamp(34px, 6vw, 84px);
  padding: clamp(20px, 4vw, 48px);
  border-radius: clamp(12px, 2vw, 22px);
  background: var(--case-panel);
}

.moto-case-study .case-contact-copy { gap: 10px; }
.moto-case-study .case-contact-copy a { text-underline-offset: 3px; text-decoration: underline; }

@media (max-width: 767px) {
  .moto-case-study :is(.case-hero, .case-story, .case-gallery, .case-contact) {
    grid-template-columns: minmax(0, 1fr);
  }
  .moto-case-study .case-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .moto-case-study .case-hero { gap: 22px; }
  .moto-case-study .case-deck { max-width: none; }
}

/* Schreibtisch und Leseansicht. */
#desk-app .screen-face .term-tag::before {
  color: #54595f !important;
}

#desk-app #monitor .reel-arrows button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--moto-text);
}

#desk-app #monitor .reel-arrows button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--moto-text) 8%, transparent) !important;
}

#desk-app #monitor .reel-arrows button svg {
  display: block;
  width: 18px;
  height: 18px;
}

#kontakt a[href*="google.com/maps"].elementor-button {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#kontakt a[href*="google.com/maps"] .elementor-button-icon {
  display: none;
}

:is(#kontakt, #soforthilfe) :is(#contact-form, #support-form) :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  font-size: 14px !important;
  color: inherit;
  background: color-mix(in srgb, var(--moto-surface) 90%, transparent);
  border: 0;
  border-bottom: 1px solid var(--moto-secondary);
  border-radius: 0;
}

:is(#kontakt, #soforthilfe) :is(#contact-form, #support-form) :is(input, select, textarea):focus {
  border-color: #54595f;
  background: var(--moto-surface);
  outline: none;
  box-shadow: none;
}

:is(#kontakt, #soforthilfe) :is(#contact-form, #support-form) :is(button[type="submit"], button.button),
#kontakt a[href="#soforthilfe"] {
  font-size: 14px !important;
}

body.text-mode #desk-app .intro-copy > .elementor {
  width: 100%;
  max-width: none;
}

body.text-mode #desk-app .intro-copy .intro-illustration {
  display: block;
  float: right;
  width: min(38%, 365px);
  height: auto;
  margin: 0 0 12px clamp(14px, 3vw, 36px);
}

body.text-mode #desk-app .intro-copy .elementor-widget-text-editor > section::after {
  display: block;
  clear: both;
  content: "";
}

body.text-mode #paper-content #chat {
  padding-top: 30px;
}

body.text-mode #paper-content #chat .chat-box {
  margin-top: 0;
}

body.text-mode #paper-content #monitor .reading-references.has-elementor-portfolio {
  padding: clamp(18px, 4vw, 40px);
}

body.text-mode #paper-content #monitor .reading-references.has-elementor-portfolio > .elementor {
  min-width: 0;
  max-width: 100%;
}

body.text-mode #paper-content #monitor .reading-references.has-elementor-portfolio > .device-page-nav {
  margin-top: 26px;
}

body.reference-page:not(.text-mode) .masthead.reference-header {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--moto-surface) 88%, transparent), transparent);
}

@media (max-width: 600px) {
  body.text-mode #desk-app .intro-copy .intro-illustration {
    float: none;
    width: min(100%, 170px);
    margin: 0 auto 16px;
  }
}