/* ==========================================================================
   Ambient-Motion Media – Inhalts-Styles für Joomla
   Stil angelehnt an ambient-motion.de: Orange #F05F40, Anthrazit #212529,
   Schrift: Barlow (selbst gehostet).
   YOOtheme-Child-Theme: templates/yootheme_ambient/css/custom.css (wird automatisch geladen)
   Schriften liegen in templates/yootheme_ambient/css/fonts/.
   Alle Klassen beginnen mit "am-", damit nichts mit dem Template kollidiert.
   ========================================================================== */

/* Selbst gehostete Schriften (DSGVO-konform, keine Google-Server) */
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-500i.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-300.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-800.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --am-primary: #f05f40;
  --am-primary-hover: #f2775d;
  --am-link: #c9452a;
  --am-dark: #212529;
  --am-dark-2: #2c3136;
  --am-text: #343a40;
  --am-muted: #6c757d;
  --am-line: #dee2e6;
  --am-soft: #f8f9fa;
  --am-white: #ffffff;
  --am-overlay: rgba(92, 77, 66, .8);
  --am-radius: 6px;
  --am-shadow: 0 16px 36px -18px rgba(33, 37, 41, .35);
  --am-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --am-font-head: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --am-font-accent: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}

.am { font-family: var(--am-font); color: var(--am-text); line-height: 1.7; font-size: 1.0625rem; }
.am *, .am *::before, .am *::after { box-sizing: border-box; }
.am img { max-width: 100%; height: auto; display: block; }
.am h1, .am h2, .am h3 { font-family: var(--am-font-head); font-weight: 700; line-height: 1.2; color: var(--am-dark); margin: 0 0 .6em; }
.am h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-transform: uppercase; letter-spacing: .5px; }
.am h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.am h3 { font-size: 1.15rem; }
.am p { margin: 0 0 1em; }
.am a { color: var(--am-link); }

/* Kurzer oranger Trennstrich unter Abschnittsüberschriften (wie auf ambient-motion.de) */
.am-section > h2::after, .am-center > h2::after, .am-split h2::after, .am-cta h2::after, .am-hero h1::after {
  content: ""; display: block; width: 50px; height: 3px; background: var(--am-primary); margin: 22px 0 0; }
.am-center > h2::after, .am-cta h2::after, .am-hero h1::after { margin-left: auto; margin-right: auto; }
.am-cta h2::after { background: #fff; }

.am-section { padding: clamp(48px, 7vw, 96px) 0; }
.am-section--soft { background: var(--am-soft); border-radius: var(--am-radius); padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); }
.am-section--dark { background: var(--am-dark); color: rgba(255,255,255,.7); border-radius: var(--am-radius); padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); }
.am-section--dark h2, .am-section--dark h3 { color: #fff; }

.am-kicker { display: inline-block; font-family: var(--am-font-accent); font-size: .95rem; letter-spacing: 4px; text-transform: uppercase; color: var(--am-primary); margin-bottom: .8em; }
.am-lead { font-size: 1.1rem; font-weight: 300; color: var(--am-muted); max-width: 48em; }
.am-center { text-align: center; }
.am-center .am-lead { margin-left: auto; margin-right: auto; }
.am-grad-text { color: var(--am-primary); }

/* Buttons: leicht abgerundet, Pfeil per CSS, Zweitaktion als unterstrichener Textlink */
.am-btn { display: inline-flex; align-items: center; gap: .6em; padding: 1.05em 1.9em; border: 0; border-radius: 4px; font-family: var(--am-font-head); font-size: .9rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.am-btn::after { content: "→"; display: inline-block; transition: transform .2s; }
.am-btn:hover::after { transform: translateX(4px); }
.am-btn--primary { background: var(--am-primary); color: #fff !important; }
.am-btn--primary:hover { background: #d94f31; }
.am-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--am-dark) !important; }
.am-btn--ghost:hover { background: var(--am-dark); box-shadow: inset 0 0 0 1.5px var(--am-dark); color: #fff !important; }
.am-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 1.8em; }

/* Hero mit Foto (header.jpg) wie auf ambient-motion.de */
/* Vollbild: reicht über den Inhaltsbereich hinaus auf volle Fensterbreite und -höhe */
.am-hero { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 100vh; min-height: 100svh; padding: clamp(100px, calc((100vh - 484px) * .4436), 240px) clamp(20px, 5vw, 64px) clamp(28px, calc((100vh - 484px) * .111), 60px); background-color: var(--am-dark); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-radius: 0; color: rgba(255,255,255,.75); text-align: center; overflow: hidden; }
html, body { overflow-x: clip; }
/* Keine Überlagerung – das Foto ist (wie auf ambient-motion.de) bereits abgedunkelt.
   Vertikale Abstände im Startbild: ab ca. 1025 px Fensterhöhe die festen Werte (240 / 83 / 158 / 60 px),
   darunter schrumpfen sie gleichmäßig, damit Text, Buttons und Kennzahlen komplett sichtbar bleiben
   (484 px = Höhe des Inhalts ohne Abstände). */
.am-hero > * { position: relative; max-width: 860px; }
.am-hero h1 { color: #fff; font-weight: 600; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: 1.4px; margin: 0 0 .4em; }
.am-hero .am-kicker { color: #fff; opacity: .85; }
.am-hero .am-lead { font-family: var(--am-font); font-weight: 400; font-size: 1.2rem; color: rgba(255,255,255,.75); margin-left: auto; margin-right: auto; }
.am-hero .am-grad-text { color: #fff; }
.am-hero .am-btns { justify-content: center; margin-top: clamp(28px, calc((100vh - 484px) * .1534), calc(4.8em + 2px)); }
.am-hero .am-btn--ghost { color: #fff !important; }
.am-hero .am-btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px #fff; color: var(--am-dark) !important; }
.am-hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px clamp(40px, 10vw, 160px); margin-top: clamp(28px, calc((100vh - 484px) * .292), calc(3.4em + 100px)); padding-top: 1.6em; border-top: 1px solid rgba(255,255,255,.2); }
.am-hero-facts strong { display: block; font-family: var(--am-font-head); font-size: 1.4rem; color: #fff; }
.am-hero-facts span { font-family: var(--am-font-accent); font-size: .9rem; letter-spacing: 1px; color: rgba(255,255,255,.7); }
.am-hero-visual { display: none; }

/* Raster */
.am-grid { display: grid; gap: 24px; }
.am-grid--2 { grid-template-columns: repeat(2, 1fr); }
.am-grid--3 { grid-template-columns: repeat(3, 1fr); }
.am-grid--4 { grid-template-columns: repeat(4, 1fr); }
.am-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

/* Karten */
.am-card { background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: 30px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.am-card:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); border-color: transparent; }
.am-card img.am-icon { width: 56px; height: 56px; margin-bottom: 18px; }
/* Karten mit Icon: Überschrift rechts neben dem Icon, Text darunter über die volle Breite */
.am-card:has(> img.am-icon) { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: center; align-content: start; }
.am-card:has(> img.am-icon) > img.am-icon { margin: 0; }
.am-card:has(> img.am-icon) > h3 { margin: 0; }
.am-card:has(> img.am-icon) > :not(img):not(h3) { grid-column: 1 / -1; margin-top: 18px; }
.am-card p { font-size: .95rem; color: var(--am-muted); }
.am-card p:last-child { margin-bottom: 0; }
.am-card--wide { grid-column: 1 / -1; }
.am-center .am-card img.am-icon { margin-left: auto; margin-right: auto; }
.am-section--dark .am-card { background: var(--am-dark-2); border-color: #3a4046; }

/* Prozess */
.am-steps { counter-reset: am-step; }
.am-step { position: relative; padding-top: 60px; }
.am-step::before { counter-increment: am-step; content: "0" counter(am-step); position: absolute; top: 0; left: 0; font-family: var(--am-font-head); font-size: 2.4rem; font-weight: 800; color: var(--am-primary); }
.am-step p { font-size: .95rem; }

/* Portfolio-Karten (Startseite) */
.am-work { display: block; background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); overflow: hidden; text-decoration: none !important; color: inherit !important; transition: transform .25s, box-shadow .25s; }
.am-work:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); }
.am-work img { aspect-ratio: 8 / 5; object-fit: cover; width: 100%; border-bottom: 1px solid var(--am-line); }
.am-work-body { padding: 20px 22px 24px; }
.am-work-body h3 { margin-bottom: .3em; }
.am-work-body p { color: var(--am-muted); font-size: .9rem; margin-bottom: .8em; }
.am-tag { display: inline-block; font-family: var(--am-font-accent); font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; padding: .25em .9em; border-radius: 300px; background: #fdeee9; color: var(--am-link); margin: 0 6px 6px 0; }
.am-work-link { font-family: var(--am-font-head); font-weight: 700; font-size: .85rem; color: var(--am-link); }

/* Listen */
.am-check { list-style: none; padding: 0; margin: 0 0 1em; }
.am-check li { position: relative; padding-left: 34px; margin-bottom: .6em; }
.am-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%; background: var(--am-primary); }
.am-check li::after { content: ""; position: absolute; left: 7px; top: calc(.35em + 4px); width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Zitat */
.am-quote { font-family: var(--am-font); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.6; color: var(--am-dark); border-left: 3px solid var(--am-primary); padding-left: 24px; margin: 0; }

/* Call to Action (wie der orange Abschnitt auf ambient-motion.de) */
.am-cta { background: var(--am-primary); border-radius: var(--am-radius); padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px); text-align: center; color: rgba(255,255,255,.88); }
.am-cta h2 { color: #fff; }
.am-cta .am-btns { justify-content: center; }
.am-cta .am-btn--primary { background: #fff; color: var(--am-dark) !important; }
.am-cta .am-btn--primary:hover { background: var(--am-dark); color: #fff !important; }
.am-cta .am-btn--ghost { color: #fff !important; }
.am-cta .am-btn--ghost:hover { background: var(--am-dark); box-shadow: inset 0 0 0 1.5px var(--am-dark); color: #fff !important; }

/* Kontakt */
.am-contact-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.am-contact-item img { width: 48px; height: 48px; flex: none; }
.am-contact-item strong { display: block; font-family: var(--am-font-head); color: var(--am-dark); }
.am-faq details { border-bottom: 1px solid var(--am-line); padding: 18px 0; }
.am-faq summary { cursor: pointer; font-family: var(--am-font-head); font-weight: 700; color: var(--am-dark); }
.am-faq summary::marker { color: var(--am-primary); }
.am-faq details p { margin: .8em 0 0; color: var(--am-muted); font-size: .95rem; }

.am-img-rounded { border-radius: var(--am-radius); box-shadow: var(--am-shadow); }
.am-mt { margin-top: 36px; }

/* Responsive */
@media (max-width: 960px) {
  .am-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .am-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .am-split, .am-grid--2, .am-grid--3, .am-grid--4 { grid-template-columns: 1fr; }
  .am-hero { min-height: 100svh; padding-top: 140px; }
  .am-hero .am-btns { margin-top: 4.8em; }
  .am-hero-facts { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-card, .am-work, .am-btn, .am-btn::after { transition: none; }
}

/* ==========================================================================
   Projekt-Bühne (Portfolio): Desktop im Browserrahmen + Smartphone
   Rahmen werden per CSS gezeichnet – gestochen scharf in jeder Auflösung.
   ========================================================================== */
.am-browser { position: relative; display: block; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(33,37,41,.08), 0 30px 60px -28px rgba(33,37,41,.45); }
.am-browser-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; background: #ececee; border-bottom: 1px solid #dcdce0; }
.am-browser-bar::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ff5f57; box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840; }
.am-browser-url { font: 500 12.5px/1 var(--am-font); color: #6b6b73; background: #fff; border-radius: 7px; padding: 6px 0; width: min(46%, 360px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am .am-browser img { width: 100%; height: auto; display: block; }

.am-phone { position: absolute; display: block; background: #ececee; border-radius: 40px; padding: 9px; box-shadow: 0 0 0 1px #d4d4d8 inset, 0 0 0 1px rgba(33,37,41,.06), 0 30px 50px -20px rgba(33,37,41,.45); }
.am .am-phone img { border-radius: 31px; width: 100%; height: auto; display: block; }

.am-case { margin: 0 0 clamp(96px, 13vw, 180px); }
.am-case-stage { position: relative; display: block; padding-bottom: 7%; text-decoration: none !important; }
.am-case-stage .am-browser { width: 86%; transition: transform .35s; }
.am-case-stage .am-phone { width: 22%; right: 0; bottom: 0; transition: transform .35s; }
.am-case--flip .am-case-stage .am-browser { margin-left: auto; }
.am-case--flip .am-case-stage .am-phone { right: auto; left: 0; }
.am-case-stage:hover .am-browser { transform: translateY(-4px); }
.am-case-stage:hover .am-phone { transform: translateY(-10px); }

.am-case-info { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 56px); margin-top: 28px; align-items: start; }
.am-case-info h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: .25em 0 .4em; }
.am-case-info p { color: var(--am-muted); font-size: 1.05rem; margin: 0; }
.am-case-num { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--am-primary); }
.am-case-link { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--am-link); text-decoration: none; }
.am-case-link:hover { text-decoration: underline; }
.am-group-title { display: flex; align-items: center; gap: 16px; margin: 0 0 40px; font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; color: var(--am-muted); }
.am-group-title::after { content: ""; flex: 1; height: 1px; background: var(--am-line); }

/* Kleine Variante für Teaser-Karten (Startseite) */
.am-work .am-browser { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--am-line); }
.am-work .am-browser-bar { height: 26px; }
.am-work .am-browser-bar::before { left: 12px; width: 9px; height: 9px; margin-top: -4.5px; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
.am-work .am-browser-url { font-size: 10.5px; padding: 4px 0; }
.am-work .am-browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 0; }

@media (max-width: 760px) {
  .am-case-stage { padding-bottom: 30%; }
  .am-case-stage .am-browser { width: 100%; }
  .am-case-stage .am-phone { width: 34%; border-radius: 26px; padding: 6px; }
  .am .am-case-stage .am-phone img { border-radius: 21px; }
  .am-case-info { grid-template-columns: 1fr; gap: 8px; }
  .am-browser-bar { height: 28px; }
  .am-browser-bar::before { left: 12px; width: 9px; height: 9px; margin-top: -4.5px; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
  .am-browser-url { font-size: 10.5px; padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .am-case-stage .am-browser, .am-case-stage .am-phone { transition: none; }
}

/* ==========================================================================
   Kunden-Logos (Seite „Kunden“)
   ========================================================================== */
.am-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.am-logo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 28px 24px 40px; background: var(--am-logo-bg, #fff); border: 1px solid var(--am-line); border-radius: var(--am-radius); text-decoration: none !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
a.am-logo:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); border-color: transparent; }
.am .am-logo img { width: auto; max-width: 82%; max-height: 64px; object-fit: contain; }
.am .am-logo--tall img { max-height: 104px; }
.am-logo-domain { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .78rem; letter-spacing: .02em; color: var(--am-muted); }
.am-logo--dark .am-logo-domain { color: rgba(255,255,255,.7); }
a.am-logo:hover .am-logo-domain { color: var(--am-link); }
a.am-logo.am-logo--dark:hover .am-logo-domain { color: #fff; }
.am-logo--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
.am .am-logo--wide img { max-width: 86%; max-height: 84px; }
@media (max-width: 960px) { .am-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .am-logos { grid-template-columns: repeat(2, 1fr); gap: 12px; } .am-logo { padding: 18px 14px 32px; } .am .am-logo img { max-height: 46px; } .am .am-logo--tall img { max-height: 74px; } .am-logo-domain { bottom: 10px; font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .am-logo { transition: none; } }

/* ==========================================================================
   YOOtheme: Kopfzeile wie auf ambient-motion.de
   Über dem Startbild (Klasse .uk-navbar-transparent): Logo mittig, Menü ausgeblendet.
   Nach dem Scrollen: weiße Leiste, Logo links, Menü rechts.
   ========================================================================== */
.tm-header .uk-logo,
.tm-header-mobile .uk-logo { font-family: var(--am-font); font-weight: 500; font-size: 1.15rem; letter-spacing: 4px; text-transform: uppercase; color: var(--am-primary) !important; transition: color .2s; }
.tm-header .uk-logo:hover { color: var(--am-primary-hover) !important; }
.tm-header .uk-navbar-nav > li > a { font-family: var(--am-font); font-weight: 400; font-size: .9rem; letter-spacing: .5px; text-transform: uppercase; transition: color .2s; }
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a { color: var(--am-primary) !important; }
.tm-header .uk-navbar-container { transition: background-color .35s, border-color .35s; border-bottom: 1px solid transparent; }
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) { background: #fff; border-bottom-color: rgba(33, 37, 41, .1); }

/* Startseite (Kopfzeile über dem Startbild = .tm-header-overlay): immer oben fixiert,
   oben transparent mit Logo mittig, ab 10 px Scrollweg (html.am-scrolled, siehe js/custom.js) weiß mit Menü */
.tm-header.tm-header-overlay, .tm-header-mobile.tm-header-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 980; }
.tm-header-overlay .uk-navbar-right { transition: opacity .35s .1s, visibility 0s; }
.tm-header-overlay .uk-navbar-left { transition: left .45s ease, transform .45s ease; }
html:not(.am-scrolled) .tm-header-overlay .uk-navbar-right { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.tm-header.tm-header-overlay .uk-navbar-left { position: absolute; top: 0; bottom: 0; left: 0; transform: translateX(0); }
html:not(.am-scrolled) .tm-header.tm-header-overlay .uk-navbar-left { left: 50%; transform: translateX(-50%); }
html:not(.am-scrolled) .tm-header-overlay .uk-logo { font-size: 1.3rem; }
html.am-scrolled .tm-header-overlay .uk-navbar-container { background: #fff !important; border-bottom-color: rgba(33, 37, 41, .1); }
html.am-scrolled .tm-header-overlay .uk-navbar-nav > li > a,
html.am-scrolled .tm-header-overlay .uk-navbar-toggle { color: #212529 !important; }
html.am-scrolled .tm-header-overlay .uk-navbar-nav > li > a:hover,
html.am-scrolled .tm-header-overlay .uk-navbar-nav > li.uk-active > a { color: var(--am-primary) !important; }

/* YOOtheme setzt Überschriften wie Buttons in Großbuchstaben – im Design nur H1 und Akzentzeilen */
.am h2, .am h3 { text-transform: none; letter-spacing: normal; }

/* Handy-Kopfzeile: Logo schmaler, damit es nicht ans Menüsymbol stößt */
.tm-header-mobile .uk-logo { font-size: .95rem !important; letter-spacing: 2.5px; }

/* ==========================================================================
   YOOtheme: Korrekturen Startbild, Navigationshöhe, Footer (wie Vorschau)
   ========================================================================== */

/* Navigationsleiste: 72 px über dem Startbild, 64 px nach dem Scrollen bzw. auf Unterseiten */
.tm-header .uk-navbar-nav > li > a,
.tm-header .uk-navbar-item,
.tm-header .uk-navbar-toggle { min-height: 64px; transition: min-height .35s, color .2s; }
html:not(.am-scrolled) .tm-header-overlay .uk-navbar-nav > li > a,
html:not(.am-scrolled) .tm-header-overlay .uk-navbar-item,
html:not(.am-scrolled) .tm-header-overlay .uk-navbar-toggle { min-height: 72px; }
.tm-header-mobile .uk-navbar-item,
.tm-header-mobile .uk-navbar-toggle { min-height: 64px; }

/* Abstand zwischen letztem Abschnitt (oranger Kasten) und Footer */
.am-yoo-last { padding-bottom: 80px !important; }

/* Footer wie auf ambient-motion.de */
.am-yoo-footer { background: #212529 !important; }
.am-footer { padding: 6px 16px 28px; text-align: center; font-family: var(--am-font); font-weight: 400; font-size: .85rem; line-height: 1.8; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.am-footer a { color: rgba(255, 255, 255, .8) !important; text-decoration: none !important; }
.am-footer a:hover { color: var(--am-primary) !important; }
/* Tech-Space-Stil gibt der Leiste 20 px Innenabstand oben/unten – entfernen, Höhe kommt aus den Menüpunkten */
.tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Nach-oben-Pfeil im Footer (YOOtheme-Element „To Top“) */
.am-yoo-totop { padding-top: 22px; }
.am-yoo-totop .uk-totop { color: rgba(255, 255, 255, .6); }
.am-yoo-totop .uk-totop:hover { color: var(--am-primary); }

/* ===== Unterseiten (wie Vorschau) ===== */
/* Seitenrand wie in der Vorschau: 24 px statt YOOtheme 15/30/40 px */
.tm-page .uk-section > .uk-container { padding-left: 24px; padding-right: 24px; }
/* Abstand unter der weißen Kopfzeile: Vorschau 120 px ab Fensteroberkante, Kopfzeile 65 px */
.am-yoo-first { padding-top: 55px !important; }
/* YOOtheme-Zitatstil (fett, Großbuchstaben) zurücksetzen */
.am blockquote { font-weight: 400; text-transform: none; letter-spacing: normal; }
/* E-Mail-Link in den Kontaktdaten unterstrichen wie in der Vorschau (YOOtheme entfernt die Unterstreichung) */
.am-contact-item a { text-decoration: underline; }
/* Tech-Space-Stil: Linie unter aktivem/überfahrenem Menüpunkt entfernen – Kennzeichnung nur über die Akzentfarbe wie auf der Startseite */
.tm-header .uk-navbar-nav > li > a::before, .tm-header-mobile .uk-navbar-nav > li > a::before,
.uk-offcanvas-bar .uk-nav > li > a::before, .uk-offcanvas-bar .uk-nav > li > a::after { display: none !important; }

/* ==========================================================================
   YOOtheme-Elemente (Builder) im Stil von ambient-motion.de
   Die Klassen stehen im Builder unter „Erweitert → Klasse“ des Abschnitts, der Zeile oder des Elements:
   Abschnitt:  am am-yoo-sec (normal) · am am-yoo-box am-yoo-box--soft | --dark | --cta (Kasten) · am-yoo-hero · am-yoo-last
   Zeile:      am-mt (Abstand nach oben) · am-split (zwei Spalten, Text neben Bild)
   Element:    am-kicker (Überschrift als „div“) · am-line (orange Linie unter H2) · am-lead (Einleitungstext)
               am-btns (Button) · am-check (Liste mit Haken) · am-img-rounded (Bild)
               am-cards (Raster mit Icon-Karten) · am-works (Projektkarten) · am-steps (nummerierte Schritte)
   Orange Hervorhebung in Überschriften: Wort im Editor kursiv setzen (<em>).
   ========================================================================== */

/* --- Abschnitte --- */
.am.am-yoo-sec { padding: clamp(48px, 7vw, 96px) 0 !important; }
.am.am-yoo-box { padding: 0 !important; }
.am.am-yoo-box > .uk-container { box-sizing: border-box; width: calc(100% - 48px); max-width: 1360px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px); border-radius: var(--am-radius); }
.am-yoo-box--soft > .uk-container { background: var(--am-soft); }
.am-yoo-box--dark > .uk-container { background: var(--am-dark); color: rgba(255, 255, 255, .7); }
.am-yoo-box--dark h2, .am-yoo-box--dark h3 { color: #fff !important; }
.am.am-yoo-box--cta > .uk-container { background: var(--am-primary); color: rgba(255, 255, 255, .88); padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px); }
.am-yoo-box--cta h2 { color: #fff !important; }
.am-yoo-box--cta .am-line::after { background: #fff; }

/* --- Zeilen --- */
.am .tm-grid-expand.am-mt { margin-top: 36px !important; }
.am .am-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-left: 0; }
.am .am-split > * { width: auto !important; padding-left: 0 !important; margin-top: 0 !important; }
@media (max-width: 760px) { .am .am-split { grid-template-columns: 1fr; } }
/* erstes Element einer Spalte ohne Abstand nach oben */
.am .tm-grid-expand > * > :first-child { margin-top: 0 !important; }

/* --- Überschriften und Texte --- */
.am div.am-kicker { display: block; }
.am .am-line::after { content: ""; display: block; width: 50px; height: 3px; background: var(--am-primary); margin: 22px 0 0; }
.am .am-line.uk-text-center::after { margin-left: auto; margin-right: auto; }
.am h1 em, .am h2 em, .am h3 em { font-style: normal; color: var(--am-primary); }
.am .am-lead.uk-text-center { margin-left: auto; margin-right: auto; }
.am .uk-panel > p:last-child { margin-bottom: 1em; }
.am div.am-img-rounded { border-radius: 0; box-shadow: none; }
.am .am-img-rounded > img { border-radius: var(--am-radius); box-shadow: var(--am-shadow); }

/* --- Buttons (Element „Button“: Primary = orange, Default = Outline) --- */
.am .am-btns { margin-top: 1.8em; }
.am .am-btns > .uk-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-left: 0; }
.am .am-btns > .uk-grid > * { padding-left: 0; margin-top: 0 !important; }
.am .uk-button { display: inline-flex; align-items: center; gap: .6em; padding: 1.05em 1.9em; border: 0; border-radius: 4px; font-family: var(--am-font-head); font-size: .9rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none !important; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.am .uk-button::after { content: "→"; display: inline-block; transition: transform .2s; }
.am .uk-button:hover::after { transform: translateX(4px); }
.am .uk-button-primary { background: var(--am-primary); color: #fff !important; }
.am .uk-button-primary:hover { background: #d94f31; }
.am .uk-button-default { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--am-dark) !important; }
.am .uk-button-default:hover { background: var(--am-dark); box-shadow: inset 0 0 0 1px var(--am-dark); color: #fff !important; }
.am-yoo-hero .uk-button-default { color: #fff !important; }
.am-yoo-hero .uk-button-default:hover { background: #fff; box-shadow: inset 0 0 0 0px #fff; color: var(--am-dark) !important; }
.am-yoo-box--cta .uk-button-primary { background: #fff; color: var(--am-dark) !important; }
.am-yoo-box--cta .uk-button-primary:hover { background: var(--am-dark); color: #fff !important; }

/* --- Startbild --- */
.am-yoo-hero { text-align: center; color: rgba(255, 255, 255, .75); }
.am-yoo-hero > .uk-section > div { padding-top: clamp(100px, calc((100vh - 484px) * .4436), 240px); padding-bottom: clamp(28px, calc((100vh - 484px) * .111), 60px); }
.am-yoo-hero .tm-grid-expand > * > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.am-yoo-hero .am-kicker { color: #fff; opacity: .85; }
.am-yoo-hero h1 { color: #fff !important; font-weight: 600; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: 1.4px; text-transform: uppercase; margin: 0 auto .4em; }
.am-yoo-hero h1 em { color: #fff; }
.am-yoo-hero h1::after { content: ""; display: block; width: 50px; height: 3px; background: var(--am-primary); margin: 22px auto 0; }
.am-yoo-hero .am-lead { font-family: var(--am-font); font-weight: 400; font-size: 1.2rem; color: rgba(255, 255, 255, .75); max-width: 48em; }
.am-yoo-hero .am-btns { margin-top: clamp(28px, calc((100vh - 484px) * .1534), calc(4.8em + 2px)); }
.am-yoo-hero .am-btns > .uk-grid { justify-content: center; }
.am .am-hero-facts { margin-top: clamp(28px, calc((100vh - 484px) * .292), calc(3.4em + 100px)); padding-top: 1.6em; border-top: 1px solid rgba(255, 255, 255, .2); }
.am .am-hero-facts > .uk-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px clamp(40px, 10vw, 160px); margin-left: 0; }
.am .am-hero-facts > .uk-grid > * { padding-left: 0; margin-top: 0 !important; }
.am .am-hero-facts .el-title { display: block; margin: 0 !important; font-family: var(--am-font-head); font-size: 1.4rem; font-weight: 700; line-height: 1.7; color: #fff; text-transform: none; letter-spacing: normal; }
.am .am-hero-facts .el-content { margin: 0 !important; font-family: var(--am-font-accent); font-size: .9rem; line-height: calc(1.0625rem * 1.7); letter-spacing: 1px; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) {
  .am-yoo-hero > .uk-section > div { padding-top: 140px; }
  .am-yoo-hero .am-btns { margin-top: 4.8em; }
  .am .am-hero-facts > .uk-grid { gap: 20px; }
}

/* --- Raster (Element „Raster“): Abstand 24 px wie Vorschau --- */
.am .am-cards > .uk-grid, .am .am-works > .uk-grid, .am .am-steps > .uk-grid { margin-left: -24px; }
.am .am-cards > .uk-grid > *, .am .am-works > .uk-grid > *, .am .am-steps > .uk-grid > * { padding-left: 24px; }
.am .am-cards > .uk-grid > .uk-grid-margin, .am .am-works > .uk-grid > .uk-grid-margin, .am .am-steps > .uk-grid > .uk-grid-margin { margin-top: 24px; }

/* Icon-Karten: Icon links neben der Überschrift, Text darunter */
.am .am-cards .el-item { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: center; align-content: start; padding: 30px; background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); box-shadow: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.am .am-cards .el-item:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); border-color: transparent; }
.am .am-cards .el-item::before, .am .am-cards .el-item::after { display: none; }
.am .am-cards .el-image { width: 56px; height: 56px; margin: 0 !important; }
.am .am-cards .el-title { margin: 0 !important; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--am-dark); }
.am .am-cards .el-content { grid-column: 1 / -1; margin: 18px 0 0 !important; font-size: .95rem; color: var(--am-muted); }

/* Projektkarten: Screenshot mit Browserleiste (Adresse kommt aus dem Link, siehe js/custom.js) */
.am .am-works .el-item { display: block; padding: 0; background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); overflow: hidden; box-shadow: none; color: inherit !important; text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
.am .am-works .el-item:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); }
.am .am-works .uk-card-media-top { display: block; margin: 0 !important; border-bottom: 1px solid var(--am-line); }
.am .am-works .uk-card-media-top img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.am .am-works .am-browser-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 26px; background: #ececee; border-bottom: 1px solid #dcdce0; }
.am .am-works .am-browser-bar::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
.am .am-works .am-browser-url { font: 500 10.5px/1 var(--am-font); color: #6b6b73; background: #fff; border-radius: 7px; padding: 4px 0; width: min(46%, 360px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: normal; text-transform: none; }
.am .am-works .uk-card-body { padding: 20px 22px 24px; }
.am .am-works .el-meta { display: inline-block; margin: 0 6px 6px 0 !important; padding: .25em .9em; border-radius: 300px; background: #fdeee9; color: var(--am-link); font-family: var(--am-font-accent); font-size: .78rem; line-height: 1.7; letter-spacing: 1px; text-transform: uppercase; }
.am .am-works .el-title { margin: 0 0 .3em !important; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--am-dark); }
.am .am-works .el-content { margin: 0 0 .8em !important; font-size: .9rem; color: var(--am-muted); }

/* Nummerierte Schritte */
.am .am-steps > .uk-grid { counter-reset: am-step; }
.am .am-steps .el-item { position: relative; padding-top: 60px; }
.am .am-steps .el-item::before { counter-increment: am-step; content: "0" counter(am-step); position: absolute; top: 0; left: 0; font-family: var(--am-font-head); font-size: 2.4rem; font-weight: 800; line-height: 1.7; color: var(--am-primary); }
.am .am-steps .el-title { margin: 0 0 .6em !important; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.am .am-steps .el-content { margin: 0 0 1em !important; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { .am .am-cards .el-item, .am .am-works .el-item, .am .uk-button, .am .uk-button::after { transition: none; } }
/* Inhaltsbreite 1360 px wie Vorschau: YOOtheme rechnet den Seitenrand (2 × 24 px) in die Maximalbreite ein */
.tm-page .uk-section > .uk-container:not(.uk-container-expand) { max-width: 1408px; }
.am.am-yoo-box > .uk-container { max-width: 1360px; }
/* Button-Element: der Rahmen ist ein normaler Block, die Buttons darin stehen nebeneinander */
.am div.am-btns { display: block; }
.am-yoo-hero .am-lead { max-width: 860px; }
/* Text-Elemente: Absatzabstand wie in der Vorschau (dort verschmelzen die Abstände von Absatz und Folgeelement) */
.am .uk-panel > p:last-child { margin-bottom: 0; }
.am .tm-grid-expand > * > .uk-panel { margin-bottom: 1em; }
/* Akzentzeile: wie in der Vorschau als Inline-Block in einer Textzeile (bestimmt die Abstände darüber und darunter) */
.am div.am-kicker { display: inline-block; width: 100%; }
.am.am-yoo-box > .uk-container { max-width: 1360px !important; }
/* Letztes Element einer Spalte (außer zweispaltige Zeilen): Abstand nach unten entfällt, wie in der Vorschau */
.am .tm-grid-expand:not(.am-split) > * > :last-child { margin-bottom: 0 !important; }
/* Hakenliste am Spaltenende behält ihren Abstand (wie Vorschau) */
.am .am-split > * > .am-check:last-child { margin-bottom: 1em !important; }
/* Abstand vor dem Footer: Kasten 80 px, normaler Abschnitt zusätzlich zu seinem Innenabstand */
.am.am-yoo-box.am-yoo-last { padding-bottom: 80px !important; }
.am.am-yoo-sec.am-yoo-last { padding-bottom: calc(clamp(48px, 7vw, 96px) + 80px) !important; }
/* Startbild: Seitenrand wie Vorschau (20–64 px) */
.am-yoo-hero .uk-container { padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }
/* Projektkarten: die verlinkte Karte innen weiß wie in der Vorschau (Stil setzt hellgrau) */
.am .am-works .el-item > .uk-card, .am .am-works .el-item > .uk-card:hover { background: var(--am-white); box-shadow: none; color: inherit; }

/* ==========================================================================
   YOOtheme-Elemente der Unterseiten
   Abschnitt:  am-yoo-first (erster Abschnitt unter der Kopfzeile) · am-yoo-pt0 (ohne Abstand oben)
               am-yoo-mt (36 px Abstand zum vorherigen Abschnitt) · am-yoo-cases (Portfolio-Projekte)
   Zeile:      am-cols2 (zwei Karten-Spalten) · am-case / am-case am-case--flip (Portfolio-Projekt)
   Spalte:     am-card-col (Spalte als Karte) · am-case-stage (Screenshots eines Projekts)
   Element:    am-logos (Raster Kundenlogos; Eintrag-Klassen am-logo--wide | --tall | --dark, am-logo--bg-black | --bg-olive)
               am-contact (Liste mit Icons) · am-faq (Akkordeon) · am-quote (Zitat) · am-tags (Liste als Schlagworte)
               am-stage-desktop / am-stage-phone (Bild) · am-case-link (Text mit Link)
   ========================================================================== */
.am.am-yoo-sec.am-yoo-first { padding-top: 55px !important; }
.am.am-yoo-sec.am-yoo-pt0 { padding-top: 0 !important; }
.am.am-yoo-mt { margin-top: 36px; }
.am-yoo-box--cta .uk-button-default { color: #fff !important; }
.am-yoo-box--cta .uk-button-default:hover { background: var(--am-dark); box-shadow: inset 0 0 0 1px var(--am-dark); color: #fff !important; }

/* --- Zwei Karten-Spalten (Kontakt) --- */
.am .am-cols2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; margin-left: 0; }
.am .am-cols2 > * { width: auto !important; padding-left: 0 !important; margin-top: 0 !important; }
.am .am-card-col { padding: 30px !important; background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); transition: transform .25s, box-shadow .25s, border-color .25s; }
.am .am-card-col:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); border-color: transparent; }
@media (max-width: 760px) { .am .am-cols2 { grid-template-columns: 1fr; } }

/* --- Kontaktdaten mit Icons (Element „Liste“ mit Bildern) --- */
.am .am-contact { margin: 0; padding: 0; list-style: none; }
.am .am-contact > li { margin: 0 0 22px !important; padding: 0; }
.am .am-contact > li > .uk-grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin-left: 0; }
.am .am-contact > li > .uk-grid > * { padding-left: 0; margin-top: 0; }
.am .am-contact .el-image { width: 48px; height: 48px; }
.am .am-contact strong { display: block; font-family: var(--am-font-head); color: var(--am-dark); }
.am .am-contact a { text-decoration: underline; }

/* --- Häufige Fragen (Element „Akkordeon“) wie aufklappbare Zeilen der Vorschau --- */
.am .am-faq { max-width: 820px; margin-left: auto !important; margin-right: auto !important; }
.am .am-faq > .el-item { margin: 0 !important; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--am-line); }
.am .am-faq .uk-accordion-title { display: list-item; list-style: disclosure-closed inside; margin: 0; padding: 0; background: none; border: 0; font-family: var(--am-font-head); font-size: 1.0625rem; font-weight: 600; line-height: 1.7; letter-spacing: normal; text-transform: none; color: var(--am-dark) !important; text-decoration: none; }
.am .am-faq .uk-open > .uk-accordion-title { list-style-type: disclosure-open; }
.am .am-faq .uk-accordion-title::marker { color: var(--am-primary); }
.am .am-faq .uk-accordion-title::before, .am .am-faq .uk-accordion-title::after, .am .am-faq .uk-accordion-icon { display: none; }
.am .am-faq .uk-accordion-content { margin: 0; padding: 0; }
.am .am-faq .uk-accordion-content p { margin: .8em 0 0; font-size: .95rem; color: var(--am-muted); }

/* --- Kundenlogos (Element „Raster“) --- */
.am .am-logos > .uk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-left: 0; }
.am .am-logos > .uk-grid > * { width: auto !important; padding-left: 0 !important; margin-top: 0 !important; }
.am .am-logos > .uk-grid > :has(> .am-logo--wide) { grid-column: span 2; }
.am .am-logos .el-item > .uk-card, .am .am-logos .el-item.uk-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin: 0; padding: 28px 24px 40px; background: var(--am-white); border: 1px solid var(--am-line); border-radius: var(--am-radius); box-shadow: none; text-decoration: none !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
.am .am-logos .am-logo--wide > .uk-card, .am .am-logos .am-logo--wide.uk-card { aspect-ratio: 8 / 3; }
.am .am-logos .am-logo--bg-black > .uk-card, .am .am-logos .am-logo--bg-black.uk-card { background: #000; }
.am .am-logos .am-logo--bg-olive > .uk-card, .am .am-logos .am-logo--bg-olive.uk-card { background: #bbbcaf; }
.am .am-logos .el-item > a.uk-card:hover { transform: translateY(-4px); box-shadow: var(--am-shadow); border-color: transparent; }
.am .am-logos picture { display: contents; }
.am .am-logos .el-image { width: auto; height: auto; max-width: 82%; max-height: 64px; margin: 0 !important; object-fit: contain; }
.am .am-logos .am-logo--tall .el-image { max-height: 104px; }
.am .am-logos .am-logo--wide .el-image { max-width: 86%; max-height: 84px; }
.am .am-logos .el-meta { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 !important; text-align: center; font-family: var(--am-font); font-size: .78rem; line-height: 1.7; letter-spacing: .02em; text-transform: none; color: var(--am-muted); }
.am .am-logos .am-logo--dark .el-meta { color: rgba(255, 255, 255, .7); }
.am .am-logos a.uk-card:hover .el-meta { color: var(--am-link); }
.am .am-logos .am-logo--dark a.uk-card:hover .el-meta { color: #fff; }
@media (max-width: 960px) { .am .am-logos > .uk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .am .am-logos > .uk-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .am .am-logos .el-item > .uk-card, .am .am-logos .el-item.uk-card { padding: 18px 14px 32px; }
  .am .am-logos .el-image { max-height: 46px; }
  .am .am-logos .am-logo--tall .el-image { max-height: 74px; }
  .am .am-logos .el-meta { bottom: 10px; font-size: .7rem; }
}

/* --- Portfolio: ein Projekt = eine Zeile (Bühne über die volle Breite, darunter Titel/Schlagworte und Text) --- */
.am.am-yoo-cases { padding: 0 !important; }
.am .am-case { display: grid !important; grid-template-columns: 5fr 7fr; column-gap: clamp(20px, 4vw, 56px); row-gap: 28px; align-items: start; margin: 0 0 clamp(96px, 13vw, 180px) !important; }
.am .am-case > * { width: auto !important; padding-left: 0 !important; margin-top: 0 !important; }
.am .am-case > .am-case-stage { grid-column: 1 / -1; position: relative; padding-bottom: 7%; }
.am .am-stage-desktop { position: relative; width: 86%; margin: 0 !important; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(33, 37, 41, .08), 0 30px 60px -28px rgba(33, 37, 41, .45); transition: transform .35s; }
.am .am-stage-phone { position: absolute; right: 0; bottom: 0; width: 22%; margin: 0 !important; padding: 9px; background: #ececee; border-radius: 40px; box-shadow: 0 0 0 1px #d4d4d8 inset, 0 0 0 1px rgba(33, 37, 41, .06), 0 30px 50px -20px rgba(33, 37, 41, .45); transition: transform .35s; }
.am .am-stage-desktop a, .am .am-stage-phone a, .am .am-stage-desktop picture, .am .am-stage-phone picture { display: block; }
.am .am-stage-desktop img { display: block; width: 100%; height: auto; }
.am .am-stage-phone img { display: block; width: 100%; height: auto; border-radius: 31px; }
.am .am-case--flip .am-stage-desktop { margin-left: auto !important; }
.am .am-case--flip .am-stage-phone { right: auto; left: 0; }
.am .am-case-stage:hover .am-stage-desktop { transform: translateY(-4px); }
.am .am-case-stage:hover .am-stage-phone { transform: translateY(-10px); }
.am .am-case > * > h3 { margin: .25em 0 .4em !important; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.am .am-tags { display: flex; flex-wrap: wrap; margin: 0 !important; padding: 0; list-style: none; }
.am .am-tags > li { margin: 0 6px 6px 0 !important; padding: .25em .9em; border-radius: 300px; background: #fdeee9; color: var(--am-link); font-family: var(--am-font-accent); font-size: .78rem; line-height: 1.7; letter-spacing: 1px; text-transform: uppercase; }
.am .am-case .uk-panel { margin: 0 !important; }
.am .am-case .uk-panel p { margin: 0; font-size: 1.05rem; color: var(--am-muted); }
.am .am-case-link a { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--am-link); text-decoration: none; }
.am .am-case-link a::after { content: " →"; }
.am .am-case-link a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .am .am-case { grid-template-columns: 1fr; }
  .am .am-case > :nth-child(3) { margin-top: -20px !important; }
  .am .am-case > .am-case-stage { padding-bottom: 30%; }
  .am .am-stage-desktop { width: 100%; }
  .am .am-stage-phone { width: 34%; padding: 6px; border-radius: 26px; }
  .am .am-stage-phone img { border-radius: 21px; }
}
@media (prefers-reduced-motion: reduce) { .am .am-stage-desktop, .am .am-stage-phone, .am .am-card-col { transition: none; } }
/* Alte Regeln der HTML-Variante (.am-logos, .am-case-link) gelten nicht für die Element-Hülle */
.am div.am-logos { display: block; }
.am div.am-case-link { display: block; margin: 0 !important; font-weight: inherit; }
/* Seitenkopf der Unterseiten: Einleitung behält ihren Absatzabstand (wie Vorschau) */
.am.am-yoo-first .tm-grid-expand > * > .am-lead:last-child { margin-bottom: 1em !important; }
/* Text in Karten-Spalten wie in den Karten der Vorschau */
.am .am-card-col .uk-panel p { font-size: .95rem; color: var(--am-muted); }
.am .am-case.tm-grid-expand > * > h3 { margin: .25em 0 .4em !important; }
.am .am-case .am-case-link p { font-size: 1.0625rem; }
/* Schlagworte: in der Vorschau eine Textzeile – 2,9 px Luft über jeder Zeile */
.am .am-tags > li { margin: 2.9px 6px 6px 0 !important; }

/* --- Rechtstexte (Impressum, Datenschutz): Abschnitt-Klasse am-legal --- */
.am.am-legal > .uk-container { max-width: calc(860px + 48px) !important; }
.am.am-legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 1.8em 0 .6em; }
.am.am-legal .tm-grid-expand > * > h2:first-child { margin-top: 0; }
.am.am-legal h3 { font-size: 1.1rem; margin: 1.6em 0 .5em; }
.am.am-legal .uk-panel > h3:first-child { margin-top: 0; }
.am.am-legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.am.am-legal li { margin-bottom: .3em; }
.am.am-legal a { overflow-wrap: anywhere; }
.am.am-legal .am-legal-source { margin-top: 2em; font-size: .9rem; color: var(--am-muted); }

/* ==========================================================================
   Kontrast (WCAG AA, mind. 4,5:1 für normalen Text) – Korrekturen Oktober 2026
   ========================================================================== */
/* Grauer Text: #6c757d (4,7:1 auf Weiß, 4,45:1 auf Hellgrau) → #5c636a (6,1:1 bzw. 5,8:1) */
:root { --am-muted: #5c636a; }
/* Einleitungstexte normal statt dünn (300 → 400) */
.am .am-lead { font-weight: 400; }
/* Akzentzeilen und Schlagworte auf hellem Grund im dunkleren Orange (#c9452a: 4,8:1 / #b83d24: 5,0:1 auf Rosa);
   im dunklen Kasten bleibt das helle Orange (4,7:1), im Startbild Weiß */
.am .am-kicker { color: var(--am-link); }
.am-yoo-box--dark .am-kicker { color: var(--am-primary); }
.am-yoo-hero .am-kicker { color: #fff; }
.am .am-tags > li, .am .am-works .el-meta { color: #b83d24; }
/* Startbild: Text kräftiger und mit leichtem Schatten, damit er auch über hellen Bildstellen (Laptop) lesbar bleibt */
.am-yoo-hero .am-kicker, .am-yoo-hero h1, .am-yoo-hero .am-lead, .am .am-hero-facts .el-title, .am .am-hero-facts .el-content { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .45); }
.am-yoo-hero .am-kicker { opacity: 1; }
.am-yoo-hero .am-lead { color: rgba(255, 255, 255, .95); }
.am .am-hero-facts .el-content { color: rgba(255, 255, 255, .9); }
/* Outline-Button im Startbild mit dunkel getönter Fläche statt durchsichtig */
.am-yoo-hero .uk-button-default { background: rgba(33, 37, 41, .55); }
.am-yoo-hero .uk-button-default:hover { background: #fff; }
/* Kundenlogo auf olivgrüner Kachel: Domain dunkel statt hell (1,6:1 → 8:1) */
.am .am-logos .am-logo--bg-olive .el-meta, .am .am-logos .am-logo--bg-olive a.uk-card:hover .el-meta { color: var(--am-dark); }
/* Akzentzeilen etwas kräftiger */
.am div.am-kicker { font-weight: 500; }
/* Akzentzeile im Startbild („· seit 2008 ·“) bleibt normal */
.am-yoo-hero div.am-kicker { font-weight: 400; }
/* Outline-Button: Rahmen 1 px */
.am .uk-button-default { box-shadow: inset 0 0 0 0px currentColor; }

/* ==========================================================================
   Portfolio-Projekt (Fassung 2, builder-fest): Zeile mit Layout „2/5 + 3/5“
   Spalte links  (Klasse am-case-main): Desktop-Ansicht, Smartphone-Ansicht, Projekttitel, Schlagworte
   Spalte rechts (Klasse am-case-text): Beschreibung, Link
   Die Screenshots laufen per CSS über die volle Breite. Jedes zweite Projekt zeigt das Smartphone links –
   automatisch, unabhängig von der Reihenfolge im Builder.
   ========================================================================== */
.am .am-case { grid-template-columns: 5fr 7fr; grid-template-rows: auto 28px auto auto 1fr; row-gap: 0; }
.am .am-case > .am-case-main { display: contents; }
.am .am-case .am-stage-desktop { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin: 0 0 7% !important; }
.am .am-case .am-stage-phone { position: relative; right: auto; left: auto; bottom: auto; grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: end; }
.am .am-case > .am-case-main > h3 { grid-column: 1; grid-row: 3; }
.am .am-case > .am-case-main > .am-tags { grid-column: 1; grid-row: 4; align-self: start; }
.am .am-case > .am-case-text { grid-column: 2; grid-row: 3 / 6; }
.am.am-yoo-cases .am-case:nth-child(even) .am-stage-desktop { justify-self: end; margin-left: auto !important; }
.am.am-yoo-cases .am-case:nth-child(even) .am-stage-phone { justify-self: start; }
.am.am-yoo-cases .am-case:nth-child(odd) .am-stage-desktop { margin-left: 0 !important; }
.am.am-yoo-cases .am-case:nth-child(odd) .am-stage-phone { justify-self: end; }
/* Hover: beide Screenshots heben sich gemeinsam an */
.am .am-case:has(.am-stage-desktop:hover, .am-stage-phone:hover) .am-stage-desktop { transform: translateY(-4px); }
.am .am-case:has(.am-stage-desktop:hover, .am-stage-phone:hover) .am-stage-phone { transform: translateY(-10px); }
@media (max-width: 760px) {
  .am .am-case { grid-template-columns: 1fr; grid-template-rows: auto 28px auto auto auto; }
  .am .am-case .am-stage-desktop { margin-bottom: 30% !important; }
  .am .am-case > .am-case-main > h3, .am .am-case > .am-case-main > .am-tags { grid-column: 1; }
  .am .am-case > .am-case-text { grid-column: 1; grid-row: 5; margin-top: 8px !important; }
}
/* Startbild: Einleitung breiter (Selektor so spezifisch wie die allgemeine 860-px-Regel für das Startbild) */
.am-yoo-hero .am-lead,
.am-yoo-hero .tm-grid-expand > * > .am-lead { max-width: 1140px; }

/* ==========================================================================
   Logo (Bild) in der Kopfzeile – Variante 06, einzeilig
   Weiße Leiste (nach dem Scrollen, Unterseiten, Handy): dunkle Fassung · über dem Startbild: Negativ-Fassung
   ========================================================================== */
.tm-header .uk-logo img, .tm-header-mobile .uk-logo img { height: 22px; width: auto; max-width: none; }
.tm-header .uk-logo > img.uk-logo-inverse, .tm-header-mobile .uk-logo > img.uk-logo-inverse { display: none !important; }
.tm-header .uk-logo > img:not(.uk-logo-inverse), .tm-header-mobile .uk-logo > img:not(.uk-logo-inverse) { display: block !important; }
html:not(.am-scrolled) .tm-header-overlay .uk-logo > img:not(.uk-logo-inverse) { display: none !important; }
html:not(.am-scrolled) .tm-header-overlay .uk-logo > img.uk-logo-inverse { display: block !important; }
/* html:not(.am-scrolled) .tm-header.tm-header-overlay .uk-logo img { height: 26px; } */
/* DNI - 2026-10-18 */
html:not(.am-scrolled) .tm-header.tm-header-overlay .uk-logo img { height: 82px; margin-top: 23px; }
/* .tm-header-mobile .uk-logo img { height: 17px; } */
/* DNI - 2026-10-18 */
.tm-header-mobile .uk-logo img { height: 17px; }
.tm-header-mobile .uk-logo img.uk-logo-inverse { height: 34px; margin-top: 18px; }
.tm-header .uk-logo, .tm-header-mobile .uk-logo { letter-spacing: normal; }

/* ==========================================================================
   Weniger Orange (Oktober 2026): Orange bleibt für Buttons, Icons, Linien, Kontakt-Kasten und Logo
   Zurücknehmen: diesen Block löschen
   ========================================================================== */
/* Akzentzeilen grau statt orange (im dunklen Kasten hellgrau, im Startbild weiß) */
.am .am-kicker { color: var(--am-muted); }
.am-yoo-box--dark .am-kicker { color: rgba(255, 255, 255, .65); }
.am-yoo-hero .am-kicker { color: #fff; }
/* Schlagworte bei den Projekten grau statt orange auf Rosa */
.am .am-tags > li, .am .am-works .el-meta { background: #f1f3f5; color: #495057; }
/* Portfolio: Projekttitel in Großbuchstaben (Laufweite wie die H1) */
.am .am-case > * > h3 { text-transform: uppercase; letter-spacing: .5px; font-weight: 600;}
/* Hakenlisten: weißer Kreis mit dunklem Rand, Haken orange */
/*.am .am-check li::before { background: #fff; border: 0.0px solid #fff; }
.am .am-check li::after { border-color: var(--am-primary); }*/
.am #am-check-start li::before { background: #fff; border: 0.0px solid #fff; }
.am #am-check-start li::after { border-color: var(--am-primary); }
/* Häufige Fragen: „+“ eingeklappt, Gedankenstrich „–“ ausgeklappt (beide fast gleich breit, die Frage springt nicht) */
.am .am-faq .uk-accordion-title::marker { font-size: 1.4em; line-height: 1; } /* line-height: größeres Zeichen macht die Zeile nicht höher */
.am .am-faq .uk-accordion-title::marker { content: "+\00A0\00A0\00A0"; font-weight: 500;}
.am .am-faq .uk-open > .uk-accordion-title::marker { content: "\2013\00A0\00A0\00A0"; }

/* ==========================================================================
   Kontaktformular (RSForm!Pro, Formular „Kontakt“, Klasse am-rsform)
   ========================================================================== */
.am .am-form { margin-top: 1.5em; }
.am .am-form > p { margin: 0; }
.am .am-rsform .uk-form-horizontal .uk-form-label { float: none; width: auto; margin: 0 0 6px; padding: 0; }
.am .am-rsform .uk-form-horizontal .uk-form-controls { margin-left: 0; }
.am .am-rsform .rsform-block { margin: 0 0 18px; }
.am .am-rsform .uk-form-label { font-family: var(--am-font-head); font-size: .95rem; font-weight: 600; color: var(--am-dark); text-transform: none; letter-spacing: normal; }
.am .am-rsform .formRequired, .am .am-rsform strong.formRequired { color: var(--am-link); font-weight: 600; margin-left: 3px; }
.am .am-rsform .uk-input, .am .am-rsform .uk-textarea { width: 100%; box-sizing: border-box; height: auto; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; background: #fff; font-family: var(--am-font); font-size: 1rem; color: var(--am-text); transition: border-color .2s, box-shadow .2s; }
.am .am-rsform .uk-textarea { min-height: 150px; resize: vertical; }
.am .am-rsform .uk-input:focus, .am .am-rsform .uk-textarea:focus { outline: none; border-color: var(--am-primary); box-shadow: 0 0 0 3px rgba(240, 95, 64, .18); }
.am .am-rsform .uk-checkbox { margin: 4px 8px 0 0; border-color: #adb5bd; }
.am .am-rsform .uk-checkbox:checked { background-color: var(--am-primary); border-color: var(--am-primary); }
.am .am-rsform .rsform-block-agreement label { display: block; position: relative; padding-left: 28px; font-size: .9rem; line-height: 1.6; color: var(--am-muted); }
.am .am-rsform .rsform-block-agreement .uk-checkbox { position: absolute; left: 0; top: 3px; margin: 0; }
.am .am-rsform .rsfp-fieldset { margin: 0; padding: 0; border: 0; }
.am .am-rsform .rsform-block-datenschutz p, .am .am-rsform .am-rsform-hinweis { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--am-muted); }
.am .am-rsform .formError, .am .am-rsform .formValidation .formError { display: block; margin-top: 4px; font-size: .85rem; color: var(--am-link); }
.am .am-rsform .rsform-error .uk-input, .am .am-rsform .rsform-error .uk-textarea, .am .am-rsform .uk-form-danger { border-color: var(--am-link); }
.am .am-rsform .rsform-block-absenden { margin-top: 24px; }
.am .am-rsform .uk-button { margin: 0; }
.am #rsform_7_page_0 + p, .am .am-form #thanku, .am .am-form .rsform-thankyou { color: var(--am-text); }
/* Startbild: Outline-Button „Referenzen ansehen“ – normal weiß mit dunkler Schrift, beim Überfahren grau mit weißer Schrift */
.am-yoo-hero .uk-button-default { background: #fff; box-shadow: inset 0 0 0 1px #fff; color: var(--am-dark) !important; }
.am-yoo-hero .uk-button-default:hover, .am-yoo-hero .uk-button-default:focus-visible { background: #5c636a; box-shadow: inset 0 0 0 1px #5c636a; color: #fff !important; }
/* Startbild: „Referenzen ansehen“ ohne Rahmen – in keinem Zustand */
.am-yoo-hero .uk-button-default,
.am-yoo-hero .uk-button-default:hover,
.am-yoo-hero .uk-button-default:focus,
.am-yoo-hero .uk-button-default:focus-visible,
.am-yoo-hero .uk-button-default:active,
.am-yoo-hero .uk-button-default.uk-active { box-shadow: none !important; border: 0 !important; outline: none; }
/* Startbild: „Projekt anfragen“ mittig, darunter „Referenzen ansehen“ als weißer Textlink (unterstrichen) */
.am-yoo-hero .am-btns > .uk-grid { flex-direction: column; align-items: center; gap: 18px; }
.am-yoo-hero .uk-button-default,
.am-yoo-hero .uk-button-default:hover,
.am-yoo-hero .uk-button-default:focus,
.am-yoo-hero .uk-button-default:focus-visible,
.am-yoo-hero .uk-button-default:active { background: transparent !important; padding: 4px 2px; color: #fff !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.am-yoo-hero .uk-button-default:hover, .am-yoo-hero .uk-button-default:focus-visible { text-decoration-color: var(--am-primary) !important; text-decoration-thickness: 2px; }
/* Startbild: durch den zweiten Button darunter ist der Inhalt ca. 50 px höher (533 statt 484 px) –
   Abstände so berechnen, dass Kennzahlen weiterhin im ersten Bildschirm liegen */
.am-yoo-hero > .uk-section > div { padding-top: clamp(90px, calc((100vh - 533px) * .4436), 240px); padding-bottom: clamp(24px, calc((100vh - 533px) * .111), 60px); }
.am-yoo-hero .am-btns { margin-top: clamp(24px, calc((100vh - 533px) * .1534), calc(4.8em + 2px)); }
.am .am-hero-facts { margin-top: clamp(24px, calc((100vh - 533px) * .292), calc(3.4em + 50px)); }
@media (max-width: 760px) {
  .am-yoo-hero > .uk-section > div { padding-top: 140px; }
  .am-yoo-hero .am-btns { margin-top: 4.8em; }
}
/* niedrige Fenster (Laptops): Mindestabstände etwas knapper */
.am-yoo-hero > .uk-section > div { padding-top: clamp(80px, calc((100vh - 533px) * .4436), 240px); padding-bottom: clamp(16px, calc((100vh - 533px) * .111), 60px); }
.am-yoo-hero .am-btns { margin-top: clamp(20px, calc((100vh - 533px) * .1534), calc(4.8em + 2px)); }
.am .am-hero-facts { margin-top: clamp(20px, calc((100vh - 533px) * .292), calc(3.4em + 50px)); }
@media (max-width: 760px) { .am-yoo-hero > .uk-section > div { padding-top: 140px; } .am-yoo-hero .am-btns { margin-top: 4.8em; } }
/* Startbild: Textlink „Referenzen ansehen“ ohne Unterstreichung (beim Überfahren wandert nur der Pfeil) */
.am-yoo-hero .uk-button-default,
.am-yoo-hero .uk-button-default:hover,
.am-yoo-hero .uk-button-default:focus,
.am-yoo-hero .uk-button-default:focus-visible,
.am-yoo-hero .uk-button-default:active { text-decoration: none !important; }
/* Kontaktformular: Auswahlfeld „Thema“ wie die Eingabefelder */
.am .am-rsform .uk-select { width: 100%; box-sizing: border-box; height: auto; padding: 10px 36px 10px 12px; border: 1px solid #ced4da; border-radius: 4px; background-color: #fff; font-family: var(--am-font); font-size: 1rem; color: var(--am-text); }
.am .am-rsform .uk-select:focus { outline: none; border-color: var(--am-primary); box-shadow: 0 0 0 3px rgba(240, 95, 64, .18); }

/* Kontaktseite: Formular in eigenem, breitem Kästchen unter den beiden Karten */
.am .tm-grid-expand.am-form-row { margin-top: 24px !important; }
.am .am-form-card .am-form { margin-top: .4em; }
/* zweispaltiges RSForm-Raster: Abstand zwischen den Spalten wie bei den Karten */
.am .am-rsform .formContainer > .uk-grid { margin-left: -32px; }
.am .am-rsform .formContainer > .uk-grid > * { padding-left: 32px; }
.am .am-rsform .formContainer > .uk-grid > .uk-grid-margin { margin-top: 0; }
/* Links in „So erreichen Sie mich“ wie im Portfolio: Linkfarbe, ohne Unterstreichung (beim Überfahren unterstrichen) */
.am .am-contact a { color: var(--am-link); text-decoration: none; }
.am .am-contact a:hover { text-decoration: underline; }
.am .tm-grid-expand.am-form-row { margin-left: 0; }
.am .am-form-row > .am-form-card { padding-left: 30px !important; }
.am .am-form-card:hover { transform: none; box-shadow: none; border-color: var(--am-line); }
/* Kontaktliste: Abstand zwischen Titel und Text über die Zeilenhöhe des Titels statt über negative Abstände */
.am .am-contact .el-content { margin-top: 1px; }
.am .am-contact .el-content > strong { line-height: 22px; }
/* Formular: Nachrichtenfeld füllt die rechte Spalte, „Anfrage senden“ endet bündig mit dem Telefonfeld */
@media (min-width: 960px) {
  .am .am-rsform .formContainer > .uk-grid > :last-child { display: flex; flex-direction: column; }
  .am .am-rsform .rsform-block-senden-abstand,
  .am .am-rsform .rsform-block-nachricht-abstand,
  .am .am-rsform .rsform-block-nachricht-abstand-copy { display: none; }
  .am .am-rsform .rsform-block-message,
  .am .am-rsform .rsform-block-message .formControls { flex: 1 1 0; display: flex; flex-direction: column; }
  .am .am-rsform .rsform-block-message .uk-textarea { flex: 1 1 0; height: auto !important; min-height: 120px !important; }
}
/* Alle Feldbeschriftungen als Block, damit „Thema“ und „Ihre Nachricht“ auf derselben Grundlinie stehen */
.am .am-rsform .uk-form-label { display: block; }
/* Hinweis unter dem Nachrichtenfeld in derselben Schriftgröße wie die Listen in den Kästchen darüber */
.am .am-card-col .am-rsform p.am-rsform-hinweis { font-size: 17px; line-height: 1.7; }
/* Hinweis optisch mittig zum E-Mail-Feld daneben (nur zweispaltig; verschiebt nur die Darstellung, nicht das Layout) */
/* Feldbeschriftungen so groß wie die fetten Titel in den Kästchen (z. B. „Erreichbarkeit“) */
.am .am-rsform .uk-form-label { font-size: 17px; }
/* Eingaben in den Formularfeldern so groß wie die übrige Textschrift */
.am .am-rsform .uk-input, .am .am-rsform .uk-select, .am .am-rsform .uk-textarea { font-size: 17px; }
/* Formular: geringerer Abstand zwischen den Feldern */
.am .am-rsform .formContainer .rsform-block { margin-bottom: 0; }
.am .am-rsform .formContainer .rsform-block + .rsform-block { margin-top: 14px !important; }
/* Formular: Nachrichtenfeld bis zur Unterkante des Telefonfelds, Hinweis und „Anfrage senden“ zentriert darunter */
.am .am-rsform .formContainer > .uk-grid + .uk-grid { margin-top: 28px !important; }
.am .am-rsform .formContainer .uk-grid .rsform-block.rsform-block-bottom { text-align: center; }
.am .am-rsform .formContainer .uk-grid .rsform-block.rsform-block-absenden { margin-top: 18px !important; text-align: center; }
/* Startbild auf dem Handy hochkant (bis 639 px Breite): kleinere Schriften */
@media (max-width: 639px) {
  .am-yoo-hero .am-kicker { font-size: 12px !important; }
  .am-yoo-hero h1 { font-size: 30px !important; }
  .am-yoo-hero .am-lead { font-size: 14px !important; }
  .am-yoo-hero .am-btns .uk-button { font-size: 11px !important; }
  .am-yoo-hero .am-hero-facts .el-title { font-size: 16px !important; line-height: 1.0 !important; }
  .am-yoo-hero .am-hero-facts .el-content { font-size: 12px !important; }
  /* geringere Abstände, damit die Kennzahlen noch auf den ersten Bildschirm passen */
  .am-yoo-hero .am-btns { margin-top: 32px !important; }
  .am-yoo-hero .am-hero-facts { margin-top: 40px !important; padding-top: 20px !important; }
}

/* Mobiles Burger-Menü: Menüpunkte in Großbuchstaben wie in der Desktop-Navigation */
.uk-offcanvas-bar .uk-nav > li > a { text-transform: uppercase; letter-spacing: .5px; }
/* Mobiles Burger-Menü (Dropbar #tm-dialog-mobile): Menüpunkte in Großbuchstaben wie in der Desktop-Navigation */
#tm-dialog-mobile .uk-nav > li > a { text-transform: uppercase; letter-spacing: .5px; }
/* Bei geöffnetem Menü (weißer Hintergrund) das Logo in der Kopfzeile dunkel zeigen, auch über dem Startbild.
   Das zweite Logo im Menü selbst bleibt ausgeblendet. */
.tm-header-mobile:has(#tm-dialog-mobile.uk-open) .uk-navbar-container .uk-logo > img:not(.uk-logo-inverse) { display: block !important; }
.tm-header-mobile:has(#tm-dialog-mobile.uk-open) .uk-navbar-container .uk-logo > img.uk-logo-inverse { display: none !important; }
#tm-dialog-mobile .uk-logo > img { display: none !important; }