/* A-Gentur · a-gentur.com · Prefinal 01 (2026-11-02)
   Papier & Linie: weißes Zeichenpapier (Milas Scan), Grafit, eine Safran-Sonne, Vollkorn.
   Klassen-Präfix ag- · Breakpoints 600 / 1024 px · keine externen Schriften, keine CDNs. */

@font-face { font-family: "Vollkorn"; src: url(../fonts/vollkorn-var.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url(../fonts/vollkorn-italic-var.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --ag-ink: #1A1917;
  --ag-soft: #5C5852;
  --ag-sun: #F0B23A;
  --ag-sun-deep: #8E6512;
  --ag-paper: #FFFFFF;
  --ag-rule: rgba(26, 25, 23, .22);
  --ag-tex: url(../img/kagit-weiss-kraeftig-1024.webp);
  --ag-ease: cubic-bezier(.16, 1, .3, 1);
  --ag-pad: 72px;
}
@media (max-width: 1024px) { :root { --ag-pad: 24px; } }
@media (max-width: 600px) { :root { --ag-pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ag-paper); scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ag-ink);
  font-family: "Vollkorn", Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.55;
  background: var(--ag-paper) var(--ag-tex) repeat; background-size: 512px 512px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: var(--ag-sun-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(142, 101, 18, .55); }
a:hover { color: var(--ag-ink); text-decoration-color: var(--ag-ink); }
:focus-visible { outline: 2px solid var(--ag-ink); outline-offset: 3px; }
::selection { background: var(--ag-sun); color: var(--ag-ink); }
button { font: inherit; color: inherit; }

.ag-skip { position: absolute; left: -999px; top: 8px; background: var(--ag-ink); color: var(--ag-paper); padding: 8px 14px; z-index: 200; }
.ag-skip:focus { left: 8px; }

.ag-wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--ag-pad); padding-right: var(--ag-pad); }

/* Kopfzeile */
.ag-top { position: absolute; left: 0; right: 0; top: 0; z-index: 10; }
.ag-top__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 76px; }
.ag-top__logo img { height: 36px; width: 116px; }
.ag-nav { display: flex; align-items: center; gap: 36px; font-size: 17px; font-weight: 500; }
.ag-nav a { color: var(--ag-ink); text-decoration: none; position: relative; padding: 6px 0; }
.ag-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ag-ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ag-ease); }
.ag-nav a:hover::after, .ag-nav a:focus-visible::after { transform: scaleX(1); }
.ag-nav .ag-nav__k { display: inline-flex; align-items: center; gap: 10px; }
.ag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ag-sun); flex: none; }
@media (max-width: 1024px) { .ag-nav a:not(.ag-nav__k) { display: none; } }

/* Intro: Platz des Films. Prefinal: das Zeichen wird mit Kohle gezeichnet (Canvas). */
.ag-intro { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.ag-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-intro__still { position: absolute; left: 50%; top: 48%; width: min(62vw, 1040px); transform: translate(-50%, -50%); }
.ag-intro.is-js .ag-intro__still { display: none; }
.ag-intro__copy { position: absolute; left: calc(var(--ag-pad) + 24px); bottom: 104px; max-width: 34ch; }
.ag-intro__copy p:first-child { font-size: 22px; font-weight: 500; line-height: 1.4; }
.ag-intro__copy p + p { margin-top: 6px; font-size: 15px; color: var(--ag-soft); }
.ag-intro__ctl { position: absolute; right: var(--ag-pad); bottom: 56px; display: flex; gap: 8px; }
.ag-btn-pill { min-width: 44px; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--ag-ink); background: rgba(255,255,255,.6); color: var(--ag-ink); font-size: 14px; cursor: pointer; }
.ag-btn-pill:hover { background: var(--ag-ink); color: var(--ag-paper); }
.ag-intro__down { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; color: var(--ag-ink); }
@media (max-width: 600px) {
  .ag-intro__copy { left: 20px; right: 20px; bottom: 112px; }
  .ag-intro__ctl { bottom: 24px; right: 20px; }
  .ag-intro__down { left: 20px; transform: none; bottom: 24px; }
  .ag-intro__still { width: 86vw; }
}

/* Die Linie führt weiter */
.ag-linie { display: block; width: 100%; height: 40px; overflow: visible; }
.ag-linie path { fill: none; stroke: var(--ag-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.is-js .ag-linie path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Abschnitte, Typografie */
.ag-sec { padding: 96px 0 128px; }
.ag-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.ag-h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; font-weight: 500; letter-spacing: -.01em; }
.ag-h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; font-weight: 500; letter-spacing: -.01em; }
.ag-h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; font-weight: 500; }
.ag-lead { font-size: 20px; line-height: 1.55; }
.ag-soft { color: var(--ag-soft); }
.ag-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ag-ink); color: var(--ag-paper); text-decoration: none; font-size: 17px; font-weight: 500; position: relative; }
.ag-btn:hover { color: var(--ag-paper); }
.ag-btn__ring { position: absolute; inset: -7px; pointer-events: none; }
.ag-btn__ring path { fill: none; stroke: var(--ag-ink); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ag-ease); }
.ag-btn:hover .ag-btn__ring path, .ag-btn:focus-visible .ag-btn__ring path { stroke-dashoffset: 0; }

.ag-einleitung .ag-h1 { grid-column: 1 / span 7; max-width: 14ch; }
.ag-einleitung__text { grid-column: 9 / span 4; padding-top: 14px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1024px) { .ag-einleitung .ag-h1, .ag-einleitung__text { grid-column: 1 / -1; } }

/* Leistungen: der Tisch. Eine Linie zeichnet die Blätter, die Sonne reist auf ihr. */
.ag-tisch { position: relative; padding: 64px 0 160px; }
.ag-tisch__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; margin-bottom: 96px; }
.ag-tisch__kopf .ag-h2 { grid-column: 1 / span 6; }
.ag-tisch__kopf p { grid-column: 7 / span 5; padding-top: 14px; }
.ag-tisch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag-tisch__svg path { fill: none; stroke: var(--ag-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1025px) { .ag-tisch__svg path { filter: url(#ag-kohle); } } /* leichte Kohle-Unruhe, nur Desktop */
.ag-sonne { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--ag-sun); pointer-events: none; display: none; will-change: transform; }
.is-js .ag-sonne { display: block; }
.ag-blaetter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 72px; position: relative; }
.ag-blatt { position: relative; background: var(--ag-paper) var(--ag-tex) repeat; background-size: 512px 512px; border: 1px solid var(--ag-rule); padding: 36px 36px 40px; min-height: 264px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 0 rgba(26,25,23,.05), 0 28px 44px -36px rgba(26,25,23,.55); transition: transform .55s var(--ag-ease), box-shadow .55s var(--ag-ease); }
.is-js .ag-blatt { border-color: transparent; }
.ag-blatt:hover, .ag-blatt:focus-within { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(26,25,23,.05), 0 40px 56px -36px rgba(26,25,23,.6); }
.ag-blatt__icon { width: 40px; height: 40px; }
.ag-blatt__icon path, .ag-blatt__icon circle, .ag-blatt__icon rect { fill: none; stroke: var(--ag-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.4s var(--ag-ease); }
.ag-blatt.is-in .ag-blatt__icon path, .ag-blatt.is-in .ag-blatt__icon circle, .ag-blatt.is-in .ag-blatt__icon rect, .ag-blatt:hover .ag-blatt__icon path, .ag-blatt:hover .ag-blatt__icon circle, .ag-blatt:hover .ag-blatt__icon rect { stroke-dashoffset: 0; }
.ag-blatt h3 a { color: var(--ag-ink); text-decoration: none; }
.ag-blatt h3 a::after { content: ""; position: absolute; inset: 0; }
.ag-blatt p { color: var(--ag-soft); font-size: 17px; }
.ag-blatt__mehr { margin-top: auto; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--ag-ink); }
.ag-blatt__mehr svg { width: 18px; height: 18px; transition: transform .45s var(--ag-ease); }
.ag-blatt:hover .ag-blatt__mehr svg { transform: translateX(6px); }
/* Zickzack auf dem Tisch: ein Blatt je Reihe, die Linie läuft zwischen ihnen hindurch */
.ag-blatt:nth-child(odd) { grid-column: 1 / span 6; }
.ag-blatt:nth-child(even) { grid-column: 6 / span 7; }
.ag-blatt:nth-child(3) { grid-column: 2 / span 6; }
.ag-blatt:nth-child(4) { grid-column: 7 / span 6; }
.ag-blatt:nth-child(7) { grid-column: 3 / span 7; }
.ag-tisch__svg, .ag-sonne { z-index: 2; }
@media (max-width: 1024px) {
  .ag-tisch__kopf .ag-h2, .ag-tisch__kopf p { grid-column: 1 / -1; }
  .ag-blatt:nth-child(n) { grid-column: 1 / -1; min-height: 0; }
  .ag-blaetter { row-gap: 56px; }
}

/* Branchen */
.ag-branchen__kopf { margin-bottom: 48px; }
.ag-branchen__kopf .ag-h2 { grid-column: 1 / span 6; }
.ag-branchen__kopf p { grid-column: 7 / span 5; padding-top: 14px; }
.ag-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--ag-rule); }
.ag-liste li { display: flex; align-items: center; gap: 22px; padding: 26px 0; border-top: 1px solid var(--ag-rule); }
.ag-liste svg { width: 28px; height: 28px; flex: none; }
.ag-liste svg path, .ag-liste svg circle { fill: none; stroke: var(--ag-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s var(--ag-ease); }
.ag-liste li.is-in svg path, .ag-liste li.is-in svg circle, .ag-liste li:hover svg path, .ag-liste li:hover svg circle { stroke-dashoffset: 0; }
.ag-liste a { font-size: clamp(22px, 2vw, 28px); font-weight: 500; color: var(--ag-ink); text-decoration: none; }
.ag-liste a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
@media (max-width: 1024px) { .ag-branchen__kopf .ag-h2, .ag-branchen__kopf p { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ag-liste { grid-template-columns: 1fr; } }

/* Referenzen: Logo wird gezeichnet, dann erscheint das Blatt mit der Arbeit */
.ag-ref__kopf { margin-bottom: 56px; }
.ag-ref__kopf .ag-h2 { grid-column: 1 / span 6; }
.ag-ref__kopf p { grid-column: 7 / span 5; padding-top: 14px; }
.ag-ref__buehne { grid-column: 1 / span 6; position: relative; min-height: 360px; display: grid; place-items: center; }
.ag-ref__zeichen { width: 100%; max-width: 560px; }
.ag-ref__zeichen polyline { fill: none; stroke: var(--ag-ink); stroke-width: 74; stroke-linecap: round; stroke-linejoin: round; }
.is-js .ag-ref__zeichen polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ag-ref__zeichen circle { fill: var(--ag-sun); transform-origin: 273.5px 180px; }
.is-js .ag-ref__zeichen circle { transform: scale(0); transition: transform .9s var(--ag-ease); }
.is-js .ag-ref__zeichen.is-done circle { transform: scale(1); }
.ag-ref__blatt { grid-column: 7 / span 6; background: var(--ag-paper) var(--ag-tex) repeat; background-size: 512px 512px; border: 1px solid var(--ag-rule); padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 28px 44px -36px rgba(26,25,23,.55); transition: transform .9s var(--ag-ease), opacity .9s var(--ag-ease); }
.is-js .ag-ref__blatt { transform: translateY(24px); }
.is-js .ag-ref__blatt.is-in { transform: none; }
.ag-ref__blatt .ag-platz { aspect-ratio: 16 / 10; display: grid; place-items: center; border: 1px dashed var(--ag-rule); color: var(--ag-soft); font-size: 15px; text-align: center; padding: 16px; filter: grayscale(1); }
.ag-ref__blatt dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 16px; }
.ag-ref__blatt dt { color: var(--ag-soft); } .ag-ref__blatt dd { margin: 0; }
@media (max-width: 1024px) { .ag-ref__kopf .ag-h2, .ag-ref__kopf p, .ag-ref__buehne, .ag-ref__blatt { grid-column: 1 / -1; } }

/* Haltung: einzige dunkle Fläche */
.ag-haltung { background: var(--ag-ink); color: var(--ag-paper); }
.ag-haltung .ag-h2 { grid-column: 1 / span 6; color: var(--ag-paper); }
.ag-haltung__text { grid-column: 8 / span 5; padding-top: 10px; display: flex; flex-direction: column; gap: 20px; }
.ag-haltung__text .ag-soft { color: #D4D4D4; }
.ag-haltung a { color: var(--ag-sun); text-decoration-color: rgba(240,178,58,.6); }
.ag-haltung a:hover { color: var(--ag-paper); text-decoration-color: var(--ag-paper); }
.ag-haltung__logo { grid-column: 1 / span 3; height: 56px; width: 180px; margin-top: 40px; }
@media (max-width: 1024px) { .ag-haltung .ag-h2, .ag-haltung__text { grid-column: 1 / -1; } }

/* Kontakt + Fuß */
.ag-kontakt .ag-h2 { grid-column: 1 / span 7; max-width: 16ch; font-size: clamp(36px, 4.2vw, 60px); }
.ag-kontakt__text { grid-column: 9 / span 4; padding-top: 12px; display: flex; flex-direction: column; gap: 22px; }
.ag-kontakt__text ul { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
@media (max-width: 1024px) { .ag-kontakt .ag-h2, .ag-kontakt__text { grid-column: 1 / -1; } }
.ag-fuss { padding: 56px 0; border-top: 1px solid var(--ag-rule); }
.ag-fuss__marke { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 18px; }
.ag-fuss__marke img { height: 48px; width: 155px; }
.ag-fuss__sp { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.ag-fuss__sp a { color: var(--ag-ink); text-decoration: none; } .ag-fuss__sp a:hover { text-decoration: underline; }
.ag-fuss__sp:nth-of-type(2) { grid-column: 6 / span 2; } .ag-fuss__sp:nth-of-type(3) { grid-column: 8 / span 2; } .ag-fuss__sp:nth-of-type(4) { grid-column: 10 / span 3; }
.ag-fuss__unten { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--ag-soft); padding-top: 24px; border-top: 1px solid var(--ag-rule); }
.ag-fuss__unten a { color: var(--ag-soft); text-decoration: none; margin-right: 20px; }
@media (max-width: 1024px) { .ag-fuss__marke, .ag-fuss__sp:nth-of-type(n) { grid-column: span 6; } }
@media (max-width: 600px) { .ag-fuss__marke, .ag-fuss__sp:nth-of-type(n) { grid-column: 1 / -1; } }

/* Mauszeiger: Kohlepunkt (nur feine Zeiger) */
.ag-cursor { position: fixed; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ag-ink); pointer-events: none; z-index: 300; display: none; transition: width .25s var(--ag-ease), height .25s var(--ag-ease), margin .25s var(--ag-ease), background .25s, border-color .25s; }
.ag-cursor.is-link { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: transparent; border: 1.5px solid var(--ag-ink); }
@media (hover: hover) and (pointer: fine) { .has-cursor .ag-cursor { display: block; } .has-cursor, .has-cursor a, .has-cursor button { cursor: none; } }

.ag-mila { color: var(--ag-sun-deep); } /* [MILA BESTÄTIGT]-Lücken sichtbar lassen */

/* Schrift: Wörter werden mit Kohlespitze geschrieben (schrift.js setzt --ag-delay / --ag-d je Zeile) */
.ag-schrift { padding: 40px 0 120px; }
.ag-schrift__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 72px; }
.ag-schrift__sp { grid-column: span 5; }
.ag-schrift__sp + .ag-schrift__sp { grid-column: 8 / span 5; }
.ag-schrift h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; margin-bottom: 28px; }
.ag-schrift ul { border-bottom: 0; }
.ag-schrift li { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.3; }
.ag-schrift li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ag-rule); transform-origin: left; }
.ag-schrift li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ag-rule); transform-origin: left; }
.ag-schrift li svg { width: 26px; height: 26px; flex: none; }
.ag-schrift li svg path, .ag-schrift li svg circle, .ag-schrift li svg rect { fill: none; stroke: var(--ag-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ag-schreib { position: relative; display: inline-block; }
.ag-schreib__t { display: inline-block; }
@media (max-width: 1024px) { .ag-schrift__sp, .ag-schrift__sp + .ag-schrift__sp { grid-column: 1 / -1; } }

/* Bewegung nur mit JS, nur ohne reduzierte Bewegung */
.is-js [data-ag-schreiben]:not(.is-still) .ag-schreib__t { clip-path: inset(-0.25em 100% -0.35em 0); }
.is-js [data-ag-schreiben]:not(.is-still) li::before, .is-js [data-ag-schreiben]:not(.is-still) li:last-child::after { transform: scaleX(0); }
.is-js [data-ag-schreiben]:not(.is-still) li svg :is(path, circle, rect) { stroke-dasharray: 140; stroke-dashoffset: 140; }
[data-ag-schreiben].is-in:not(.is-still) .ag-schreib__t { animation: ag-schreiben var(--ag-d, 700ms) cubic-bezier(.45, .05, .55, .95) var(--ag-delay, 0ms) both; }
[data-ag-schreiben].is-in:not(.is-still) .ag-schreib::after { content: ""; position: absolute; top: 52%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ag-ink); animation: ag-spitze var(--ag-d, 700ms) cubic-bezier(.45, .05, .55, .95) var(--ag-delay, 0ms) both; pointer-events: none; }
[data-ag-schreiben].is-in:not(.is-still) li::before { animation: ag-strich calc(var(--ag-d, 700ms) + 300ms) cubic-bezier(.16, 1, .3, 1) var(--ag-delay, 0ms) both; }
[data-ag-schreiben].is-in:not(.is-still) li:last-child::after { animation: ag-strich 900ms cubic-bezier(.16, 1, .3, 1) calc(var(--ag-delay, 0ms) + var(--ag-d, 700ms)) both; }
[data-ag-schreiben].is-in:not(.is-still) li svg :is(path, circle, rect) { animation: ag-zeichnen 700ms ease-out calc(var(--ag-delay, 0ms) - 80ms) both; }
@keyframes ag-schreiben { from { clip-path: inset(-0.25em 100% -0.35em 0); } to { clip-path: inset(-0.25em 0 -0.35em 0); } }
@keyframes ag-spitze { 0% { left: 0; transform: scale(0); } 6% { transform: scale(1); } 94% { left: 100%; transform: scale(1); } 100% { left: 100%; transform: scale(0); } }
@keyframes ag-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ag-zeichnen { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }

/* Rechtstexte */
.ag-text { max-width: 68ch; padding: 140px 0 96px; }
.ag-text h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; font-weight: 500; margin-bottom: 36px; }
.ag-text h2 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 36px 0 10px; }
.ag-text p, .ag-text li { font-size: 18px; line-height: 1.6; }
.ag-text p + p { margin-top: 10px; }
.ag-text ul { list-style: disc; padding-left: 1.2em; margin-top: 8px; }
.ag-text__stand { margin-top: 48px; font-size: 15px; color: var(--ag-soft); }
.ag-mini-fuss { padding: 28px 0 40px; border-top: 1px solid var(--ag-rule); display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--ag-soft); }
.ag-mini-fuss a { color: var(--ag-soft); text-decoration: none; } .ag-mini-fuss a:hover { color: var(--ag-ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .is-js .ag-linie path, .ag-blatt__icon path, .ag-blatt__icon circle, .ag-blatt__icon rect, .ag-liste svg path, .ag-liste svg circle, .is-js .ag-ref__zeichen polyline, .ag-btn__ring path { stroke-dashoffset: 0 !important; }
  .is-js .ag-ref__zeichen circle { transform: none !important; }
  .is-js .ag-ref__blatt { transform: none; }
  .ag-cursor { display: none !important; } .has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
}

/* Kontaktformular (zweiter Kontaktweg neben E-Mail, § 5 DDG) */
.ag-form { margin-top: 40px; display: grid; gap: 22px; }
.ag-form__feld { display: grid; gap: 8px; }
.ag-form__feld label { font-size: 16px; font-weight: 600; }
.ag-form__frei { font-weight: 400; color: var(--ag-soft); }
.ag-form input, .ag-form textarea { font: inherit; font-size: 18px; color: var(--ag-ink); background: rgba(255,255,255,.72); border: 1px solid var(--ag-rule); border-radius: 2px; padding: 12px 14px; min-height: 48px; width: 100%; }
.ag-form textarea { resize: vertical; line-height: 1.5; }
.ag-form input:focus-visible, .ag-form textarea:focus-visible { outline: 2px solid var(--ag-ink); outline-offset: 2px; border-color: var(--ag-ink); }
.ag-form__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ag-form__hinweis { font-size: 15px !important; color: var(--ag-soft); }
.ag-form__hinweis a { color: var(--ag-soft); }
.ag-form__senden { justify-self: start; min-height: 48px; padding: 0 26px; border-radius: 24px; border: 1px solid var(--ag-ink); background: var(--ag-ink); color: var(--ag-paper); font: inherit; font-size: 17px; cursor: pointer; transition: background .2s, color .2s; }
.ag-form__senden:hover { background: transparent; color: var(--ag-ink); }
.ag-form__fehler { margin-top: 28px; padding: 14px 16px; border-left: 3px solid var(--ag-sun-deep); font-size: 16px !important; }
.ag-danke__zeichen { width: 120px; height: auto; margin-bottom: 36px; }
.ag-danke__wege { margin-top: 28px !important; }
.ag-form__fehler:focus { outline: none; }