/* AK86 2026 – Ergänzungen für WordPress (Schrift, Admin-Leiste, Contact Form 7, normale Inhaltsseiten) */

/* Archivo (statt Pragmatica über Adobe Fonts, Alex 02.11.2026: „lass uns gern die Archivo auch auf der Seite nutzen … lokal einbinden“).
   Eine variable Datei mit Breite (62–125 %) und Gewicht (100–900), Lizenz SIL Open Font License.
   „Archivo“ = Fließtext und alles in normaler Breite; „Archivo Expanded“ = dieselbe Datei, immer volle Breite (Ersatz für pragmatica-extended). */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-var-latin.woff2') format('woff2'); 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: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo Expanded'; font-style: normal; font-weight: 100 900; font-stretch: 125%; font-display: swap; src: url('../fonts/archivo-var-latin.woff2') format('woff2'); 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: 'Archivo Expanded'; font-style: normal; font-weight: 100 900; font-stretch: 125%; font-display: swap; src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Roboto Mono liegt im Theme (kein Google-Fonts-Abruf) */
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/roboto-mono-latin-600-normal.woff2') format('woff2'); }

/* Admin-Leiste: festes Menü und Kachel-Menü rutschen darunter */
body.admin-bar { --abh: 32px; }
@media (max-width: 782px) { body.admin-bar { --abh: 46px; } }
.nav { top: var(--abh, 0px); }
.nav-cta { top: calc(var(--abh, 0px) + 22px); }
.nav-cta.scrolled { top: calc(var(--abh, 0px) + 22px); }
@media (max-width: 760px) { .nav-cta { top: calc(var(--abh, 0px) + 16px); } }
.bm { top: var(--abh, 0px); }

/* WordPress gibt normalen Seiten (Startseite, Teamseite, Impressum …) die Body-Klasse „page“. Die meint hier aber die
   1920er-Inhaltsspalte (div.page) – ohne diese Zeile wird der ganze body 1920 breit und schneidet alles Breitere ab. */
body.page { position: static; max-width: none; margin-inline: 0; }

/* Kapitel-Navigation: Die Fläche selbst (inkl. unsichtbarer Beschriftungen) nimmt keine Klicks an, nur die Nummern-Kästchen.
   Sonst blockiert ein rund 360 × 70 px großer unsichtbarer Streifen Klicks auf den Inhalt darunter. */
.chap.show { pointer-events: none; }

/* WebGL-Bubbles (bubbles.js) aktiv: CSS-Kreise aus dem Prototyp ausblenden, sie bleiben nur als Ersatz ohne WebGL */
.bubwrap.gl .b { display: none; }
html.trx-wait .bubwrap .b { display: none; }
/* Wort als Fenster: über dem Inhalt, unter Navigation und fliegendem Bild */
.ak86-wf { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 38; pointer-events: none; display: block; overflow: visible; }
/* Raster leuchtet: Lochplatte über dem Inhalt, unter Navigation */
/* Ziel beim Seitenwechsel (Alex 02.11.): Mono-Label unten in der Mitte */
/* Lader als Konsole links am Rand, gleiche Schriftgröße wie zuvor das Label. Difference hält sie auf hellem und dunklem Licht lesbar */
.trx-to { position: fixed; left: clamp(14px, 1.6vw, 28px); bottom: clamp(18px, 4vh, 44px); z-index: 41; display: flex; flex-direction: column; gap: 4px; max-width: calc(100vw - 28px); font: 12px/1.3 var(--f-mono); letter-spacing: .02em; color: #fff; mix-blend-mode: difference; white-space: nowrap; pointer-events: none; transition: opacity .3s .3s; }
.trx-to span { display: block; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; }
.trx-to span:last-child::after { content: ''; display: inline-block; width: .55em; height: 1em; margin-left: .5em; vertical-align: -.12em; background: currentColor; animation: trx-to-c .8s steps(1) infinite; }
.trx-to.out { opacity: 0; transition-delay: .55s; } /* die gemessene Zeit bleibt kurz stehen */
@keyframes trx-to-c { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trx-to span:last-child::after { animation: none; } }
.ak86-rl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 38; pointer-events: none; display: block; } /* Seitenwechsel: bis die WebGL-Bubbles übernehmen, keine Ersatzkreise */
/* Seitenwechsel: Die neue Seite zeigt erst nur Menü und drehende Bubbles, dann blendet base.js den Inhalt ein.
   Nur Deckkraft, keine Verschiebung (transform würde gepinnte Szenen aus der Position bringen). */
/* div.page statt .page: WordPress gibt dem body auf normalen Seiten (Startseite, Agentur) die Klasse „page“; sonst würden auch Bubbles, Raster und Cursor beim Ankommen ausgeblendet (schwarzer Blitzer, Alex 30.10.) */
html.trx-in div.page > :not(.nav):not(.nav-cta):not(main), html.trx-in div.page > main > * { opacity: 0; }
html.trx-show div.page > :not(.nav):not(.nav-cta):not(main), html.trx-show div.page > main > * { animation: ak86-trx-in .45s ease-out backwards; }
@keyframes ak86-trx-in { from { opacity: 0; } }

/* Bildflug in den Projektkopf (base.js launchFly, bubbles.js auf der neuen Seite).
   Klasse der Kopie ist ak86-fly; trx-fly ist nur der Zustand am <html> (nicht verwechseln, sonst greift das hier aufs html).
   .at-hero ist exakt die Lage von .hero-img auf der Projektseite (base.css), damit beide Seiten dasselbe Bild zeigen. */
@property --fm-a { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --fm-1 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --fm-2 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.ak86-fly { position: fixed; z-index: 39; margin: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--fm-a), #000 var(--fm-1), transparent var(--fm-2)); mask-image: linear-gradient(var(--fm-a), #000 var(--fm-1), transparent var(--fm-2)); }
/* Bild + Licht (03.11.): solange die Lavalampe über dem Flugbild leuchtet, tritt das Bild zurück.
   trx-fly nur bis zur Ankunft (trx-in), danach steuert lichtlayer.js über ak86-lf; trx-fly bleibt 1,4 s länger stehen und hielte das Bild sonst dunkel, wenn das Licht schon weg ist */
.ak86-fly, .hero-img { transition: filter .7s ease; }
html.ak86-lf .ak86-fly, html.ak86-lf .hero-img, html.trx-in.trx-fly .ak86-fly, html.trx-in.trx-fly .hero-img { filter: brightness(.32) saturate(.4); }
/* Light Mode: Bild tritt hell statt dunkel zurück, sonst steht dunkle Schrift auf dunklem Bild; die Tinte liegt darüber */
html.lightmode.ak86-lf .ak86-fly, html.lightmode.ak86-lf .hero-img, html.lightmode.trx-in.trx-fly .ak86-fly, html.lightmode.trx-in.trx-fly .hero-img { filter: contrast(.35) brightness(1.7) saturate(.5); }
.ak86-fly img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; }
.ak86-fly.at-hero { left: 0; right: 0; top: var(--abh, 0px); height: 100vh; height: 100svh; --fm-a: 180deg; --fm-1: 55%; --fm-2: 100%; }
.ak86-fly.at-hero img { height: 118%; object-position: center 30%; }
@media (orientation: portrait) { .ak86-fly.at-hero { height: 62vh; height: 62svh; } }
/* Ziel Ratgeber-Kopf (ratgeber.css): auch hochkant bildschirmhoch, Auslauf erst ab 90 % (09.11.2026) */
.ak86-fly.at-hero.rg { height: 100vh; height: 100svh; --fm-1: 90%; }
/* Neue Seite nach Bildflug: Kopfbild bleibt stehen, nur der Rest des Kopfs blendet mit ein */
html.trx-in.trx-fly div.page > main > .hero { opacity: 1; }
html.trx-in.trx-fly div.page > main > .hero > :not(.hero-img) { opacity: 0; }
html.trx-show.trx-fly div.page > main > .hero { animation: none; }
html.trx-show.trx-fly div.page > main > .hero > :not(.hero-img) { animation: ak86-trx-in .45s ease-out backwards; }
html.trx-rasch.trx-fly .ak86-fly, html.trx-rasch.trx-fly .hero-img { filter: none !important; } /* kam schnell an: Das Bild bleibt hell */

.screen-reader-text, .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ak-logo, .biglogo { color: var(--static-white); }
mark.ph { background: #ffe14d; color: var(--bgcolor); padding: .02em .3em; font-weight: 600; }

/* ---------- Contact Form 7 im neuen Look ---------- */
.wpcf7 { position: relative; }
.wpcf7-form-control-wrap { display: block; }
.cform label .wpcf7-form-control-wrap input, .cform label .wpcf7-form-control-wrap textarea { margin-top: 8px; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font: 600 12px var(--f-mono); color: #ff8a7a; }
.wpcf7 input.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: #ff8a7a !important; }
.wpcf7 form .wpcf7-response-output { margin: 22px 0 0; padding: 12px 16px; border: 1px solid rgba(var(--gridcolor-rgb),.5); font-size: 15px; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #5bd17a; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #ff8a7a; }
.wpcf7-spinner { display: none; }
.cform .rb, .bform .rb { --bb1: #BA1424; --bb2: #50BBB8; }
.wpcf7 form.submitting .rb { opacity: .5; pointer-events: none; }
/* Auswahl-Chips (Radio/Checkbox aus CF7) wie im Prototyp */
.chips .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .wpcf7-list-item { margin: 0; }
.chips .wpcf7-list-item label { position: relative; display: block; cursor: pointer; }
.chips .wpcf7-list-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips .wpcf7-list-item-label { display: block; padding: 9px 14px; font-size: 15px; border: 1px solid rgba(var(--gridcolor-rgb),.4); transition: background-color .2s, border-color .2s, color .2s; }
.chips .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--gridcolor); }
.chips .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--main); border-color: var(--main); }
.chips .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--gridcolor); outline-offset: 2px; }
/* Datei-Upload (Plugin „Drag and Drop Multiple File Upload“) als gestrichelte Fläche */
.bform .codedropz-upload-wrapper { margin: 0; }
.bform .codedropz-upload-handler { border: 1.5px dashed rgba(var(--gridcolor-rgb),.5); border-radius: 0; background: transparent; transition: border-color .25s, background-color .25s; }
.bform .codedropz-upload-handler:hover, .bform .codedropz-dragover .codedropz-upload-handler { border-color: var(--gridcolor); background: rgba(var(--gridcolor-rgb),.06); }
.bform .codedropz-upload-inner h3 { font: 700 18px var(--f-body); color: var(--textcolor); }
.bform .codedropz-upload-inner span, .bform .codedropz--results, .bform .dnd-upload-counter { color: rgba(var(--gridcolor-rgb),.85); font-size: 15px; }
.bform .codedropz-btn-wrap a.cd-upload-btn { color: var(--textcolor); text-decoration: underline; }
.bform .dnd-upload-status .dnd-upload-details .name { color: var(--textcolor); }
/* Rückruf im Kachel-Menü */
.bm-form .wpcf7-response-output { font-size: 13px; margin-top: 12px; }

/* ---------- Normale Inhaltsseiten (Impressum, Datenschutz, noch nicht umgebaute Seiten) ---------- */
.gen-hero { position: relative; z-index: 2; padding: clamp(170px, 26svh, 260px) var(--gut) clamp(40px, 7vh, 80px); }
.gen-hero h1 { font-size: clamp(40px, 7vw, 130px); }
.gen-hero .kick { margin-bottom: 18px; }
.gen-body { position: relative; z-index: 2; padding: 0 var(--gut) clamp(80px, 14vh, 160px); }
.prose { max-width: 78ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; font-size: clamp(26px, 2.4vw, 40px); }
.prose h3 { margin-top: 1.4em; font-size: clamp(20px, 1.6vw, 28px); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { max-width: 100%; height: auto; }
.gen-note { margin-top: 40px; font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.6); }
/* WPBakery-Inhalte in normalen Seiten nicht über die Seitenbreite laufen lassen */
.gen-body .vc_row { margin-left: 0; margin-right: 0; }

/* Handy: Kopfzeile dichter an den Rand (03.11.: „mobil muss die ganze Kopfzeile weiter zum Rand. Sowohl nach oben als auch nach links und rechts“), flacher, Glasband über die volle Breite */
@media (max-width: 760px) {
  .nav, .nav.scrolled, body.st-on .nav.scrolled { min-height: 66px; padding: 8px 136px 8px 10px; gap: 8px; }
  .ak-logo { width: 50px; }
  .nav-cta, .nav-cta.scrolled, body.st-on .nav-cta.scrolled { top: var(--abh, 0px); right: 4px; height: 66px; gap: 2px; align-items: center; transform: none; }
  .nav-cta .rb-s { width: 66px; --bblur: 14px; }
  .nav-cta .rb-s span { font-size: 10px; }
  .mode-btn { width: 34px; height: 34px; }
  .stbg { left: 0 !important; right: 0 !important; top: var(--abh, 0px) !important; height: 66px !important; -webkit-mask-image: none; mask-image: none; }
  /* Ergebniskacheln einspaltig (03.11.: „Die Ergebniskacheln würde ich auch 1 spaltig machen“) */
  .perf-grid { grid-template-columns: minmax(0, 1fr); }
  /* Printboxen einspaltig zum Wischen (03.11.: „Die Printboxen müssen mobil 1spaltig sein“, „ob man diese dann zum swipen macht“): die nächste schaut am Rand hervor */
  .pg-stage.tiles { display: flex; gap: 10px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pg-stage.tiles::-webkit-scrollbar { display: none; }
  .ptile { flex: 0 0 84%; scroll-snap-align: start; }
  .ptname, .ptile:not(.hb) .ptname { right: 120px; bottom: 12px; font-size: 15px; }
  .ptflip { left: auto; right: 10px; bottom: 9px; }
  .pg-head .pg-z { display: inline; margin-left: auto; }
}
@media (min-width: 761px) { .pg-head .pg-z { display: none; } }

/* Kachel-Menü: Buchstaben stehen einzeln, darum der Unterstrich am Link selbst */
.bm-links li { padding-bottom: .14em; }
.bm-links a.on { text-decoration: none; box-shadow: 0 .07em 0 var(--static-maincolor); }

/* Tablet: Menü-Links raus, sie liefen in die Statusleiste, dafür gibt es das Burger-Menü (03.11.: „auf tablet das Menü rausnhemen“) */
@media (max-width: 1279px), (hover: none) and (max-width: 1400px) {
  .nav .links { display: none; }
  .nav .mode-btn { margin-left: auto; }
}