/* AK86 2026 – Footer und Kontakt-Ebene (alle Seiten), Entwurf footer-kontakt.html vom 30.10.2026.
   Footer A „Logo zum Anfassen“ (Logo steht und zerfällt, wenn der Footer oben anschlägt) + Kontakt 6 „Durch den Knopf“. */

/* ---------- Footer: bildschirmhoch, volle Breite, Inhalt in der 1920er-Spalte ---------- */
/* footer.foot: base.css hat noch eine alte Prototyp-Regel .foot (55 % Deckkraft, Innenabstand) – hier zurückgesetzt */
footer.foot { --vw: calc(100vw - var(--sbw, 0px)); position: relative; z-index: 2; width: var(--vw); margin-left: calc(50% - var(--vw) / 2); padding: 0; opacity: 1; font-family: var(--f-body); font-size: 16px; overflow: hidden; border-top: 1px solid var(--line); }
.foot-fx { position: absolute; inset: 0; z-index: 1; visibility: hidden; }
.foot-fx.on { visibility: visible; }
/* Das Logo hat seinen eigenen Bereich über dem Inhalt: Darunter bleibt ein voller Bildschirm für Frage und Knöpfe (04.11.: „ich meinte mit das logo ist nicht mehr teil des footers nicht so“, vorher lag es über der Frage). Oben Abstand zur Kopfzeile, Höhe des Logos, darunter der Bildschirm */
footer.foot { --kopf: calc(var(--abh, 0px) + 104px); --lg: clamp(120px, 11vw, 210px); --fh: max(100vh, 640px); }
.foot-in { position: relative; z-index: 2; min-height: calc(var(--kopf) + var(--lg) + var(--fh)); max-width: 1920px; margin: 0 auto; padding: var(--kopf) var(--gut) 30px; display: flex; flex-direction: column; pointer-events: none; }
.foot-in a, .foot-in button { pointer-events: auto; }
/* Frage in der Höhe mittig, linksbündig; unten links ©, unten rechts Menü (Alex 30.10.) */
.foot-mid { margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; max-width: min(100%, 1100px); }
.foot-und { font: 14px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--static-seccolor); margin: 0 0 18px; }
.foot-q { margin: 0; font-family: var(--f-ext); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6.4vw, 120px); line-height: .92; letter-spacing: -.03em; min-height: 1.84em; }
.foot-q .zl { display: block; white-space: nowrap; }
.foot-q .w { display: inline-block; white-space: nowrap; }
.foot-q .ch { display: inline-block; will-change: transform; }
.foot-q .ch.r { color: var(--static-maincolor); }
.foot-meld { margin: 4vh 0 0; font: 14px/1.7 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.75); }
.foot-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 -26px; }
.foot-btns .rb { --bb1: #BA1424; --bb2: #50BBB8; }
.foot-btns .rb span { white-space: nowrap; } /* „E-Mail“ nicht am Bindestrich umbrechen (Alex 30.10.) */
.foot-bot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.foot-copy { font: 12px var(--f-mono); color: rgba(var(--gridcolor-rgb),.6); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; font: 12px var(--f-mono); }
.foot-links a { color: var(--textcolor); text-decoration: none; opacity: .75; transition: opacity .2s, color .2s; }
.foot-links a:hover { opacity: 1; color: var(--static-seccolor); }
/* Das Logo steht oben links, direkt unter dem kleinen Logo im Kopf; dockt der Footer oben an, stößt es an und zerfällt (kontakt.js) */
/* Unter den Knöpfen bleibt mit Maus Platz für den Wirbel (04.11.: „auf schmaleren Bildschirmen hat der wirbel unten zu wenig platz“) */
.foot-logo { flex: none; display: block; width: var(--lg); margin-bottom: var(--kopf); color: var(--textcolor); }
@media (hover: hover) { footer.foot { --fh: max(100vh, 760px); } .foot-mid { margin: auto 0 clamp(170px, 26vh, 260px); } .foot-bot { margin-top: 0; } }
.foot-logo svg { display: block; width: 100%; height: auto; }
.foot .ltr { position: absolute; left: 0; top: 0; cursor: grab; will-change: transform; touch-action: none; }
.foot .ltr:active { cursor: grabbing; }
.foot .ltr svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 760px) {
  footer.foot { --kopf: calc(var(--abh, 0px) + 110px); --lg: 96px; --fh: 100svh; }
  .foot-btns { margin-left: -18px; gap: 0; }
  .foot-btns .rb { width: 112px; } .foot-btns .rb span { font-size: 11px; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .foot-links { justify-content: flex-start; }
  .foot-logo { width: 96px; }
}

/* ---------- Kontakt-Ebene ---------- */
.kov { position: fixed; inset: 0; z-index: 72; visibility: hidden; pointer-events: none; }
.kov.on { visibility: visible; pointer-events: auto; }
.kov-panel { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: clamp(96px, 12vh, 150px) 0 clamp(40px, 6vh, 80px); background: rgba(var(--bgcolor-rgb),.3); }
/* Formular in der 1920er-Spalte wie der Seiteninhalt, senkrecht mittig (Alex 30.10.) */
.kov-in { width: 100%; max-width: 1920px; margin: auto; padding: 0 var(--gut); }
/* Schließen: rotes Quadrat an der Stelle des Menü-Knopfs (kontakt.js setzt die Lage) */
.kov-x { position: fixed; top: calc(var(--abh, 0px) + 42px); right: var(--gut); z-index: 3; width: 56px; height: 56px; padding: 0; border: 0; background: var(--static-maincolor); cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.kov-x i { position: absolute; left: 15px; right: 15px; top: 27px; height: 2px; background: var(--static-white); transform: rotate(45deg); }
.kov-x i + i { transform: rotate(-45deg); }
.kov-x:hover { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--gridcolor-rgb),.6); }
/* Rand des Lochs, das aus dem Knopf wächst (gestrichelt wie der Knopf). Die Fläche ist echt ausgeschnitten */
.kov-hole { position: fixed; z-index: 73; border-radius: 50%; pointer-events: none; }
.kov-hole::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(var(--gridcolor-rgb),.9); }
body.kov-in .cur, body.kov-in .toast { z-index: 80; }

/* ---------- Satz-Formular (CF7 „Kontakt 2026 (Satz)“) ---------- */
.kform .kov-k { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--static-seccolor); margin: 0 0 22px; }
.kform .mad { font-family: var(--f-body); font-weight: 700; font-size: clamp(24px, 2.6vw, 44px); line-height: 1.6; letter-spacing: -.01em; max-width: 1180px; }
.kform .wpcf7-form-control-wrap { position: relative; display: inline-block; }
.kform .mad input[type="text"] { font: inherit; color: var(--static-seccolor); background: none; border: 0; border-bottom: 2px solid rgba(var(--gridcolor-rgb),.35); border-radius: 0; padding: 0 4px; outline: none; max-width: 100%; transition: border-color .2s; }
.kform .mad input[type="text"]:focus { border-color: var(--static-seccolor); }
.kform .mad input::placeholder { color: rgba(var(--gridcolor-rgb),.6); } /* Felder dürfen nicht deaktiviert wirken (04.11.: „ob man es als User versteht?“) */
.kform .mad .wpcf7-form-control-wrap { white-space: nowrap; } /* Punkt bleibt beim Feld, nie am Zeilenanfang (kontakt.js) */
.kform .mad .wpcf7-not-valid-tip { white-space: nowrap; }
/* Leistungen als Chips */
.kform .wpcf7-checkbox { display: inline-flex; flex-wrap: wrap; gap: 10px; vertical-align: middle; margin: 6px 0; }
.kform .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.kform .wpcf7-checkbox .wpcf7-list-item.hat-p { display: inline-flex; align-items: flex-end; white-space: nowrap; line-height: 1; }
.kform .wpcf7-checkbox::after { content: 'Mehrere möglich'; align-self: center; font: 12px var(--f-mono); letter-spacing: 0; white-space: nowrap; color: rgba(var(--gridcolor-rgb),.72); }
.kform .wpcf7-checkbox label { position: relative; display: block; cursor: pointer; }
.kform .wpcf7-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kform .wpcf7-checkbox .wpcf7-list-item-label { display: block; font: 600 15px/1 var(--f-body); letter-spacing: 0; padding: 11px 14px; border: 1px solid rgba(var(--gridcolor-rgb),.4); color: var(--textcolor); transition: background-color .2s, border-color .2s; }
.kform .wpcf7-checkbox label:hover .wpcf7-list-item-label { border-color: var(--gridcolor); }
.kform .wpcf7-checkbox input:checked + .wpcf7-list-item-label { background: var(--static-maincolor); border-color: var(--static-maincolor); color: var(--static-white); }
.kform .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--static-seccolor); outline-offset: 2px; }
.kform .more { margin-top: 34px; max-width: 1180px; }
/* Textfeld wie eine Satzzeile: kein Kasten, Unterstrich, fette Schrift, wächst mit (Alex 30.10.: „sieht noch richtig doof aus“) */
.kform .more .wpcf7-form-control-wrap { display: block; }
.kform .more textarea { display: block; width: 100%; min-height: 0; font: 700 clamp(18px, 1.7vw, 30px)/1.45 var(--f-body); letter-spacing: -.01em; color: var(--static-seccolor); background: none; border: 0; border-bottom: 2px solid rgba(var(--gridcolor-rgb),.35); border-radius: 0; padding: 4px 4px 8px; outline: none; resize: none; overflow: hidden; transition: border-color .2s; }
.kform .more textarea:focus { border-color: var(--static-seccolor); }
.kform .more textarea::placeholder { color: rgba(var(--gridcolor-rgb),.6); }
.kform .wpcf7-acceptance { display: block; margin-top: 16px; }
.kform .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.kform .wpcf7-acceptance label { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(var(--gridcolor-rgb),.75); cursor: pointer; }
.kform .wpcf7-acceptance input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--static-maincolor); }
.kform .wpcf7-acceptance a { color: var(--textcolor); }
.kform .send { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.kform .send .rb { margin-left: -30px; --bb1: #BA1424; --bb2: #50BBB8; }
.kform .send p { margin: 0; font: 13px/1.6 var(--f-mono); color: rgba(var(--gridcolor-rgb),.6); max-width: 360px; }
.kform .wpcf7-not-valid-tip { position: absolute; left: 4px; top: 100%; font: 12px var(--f-mono); letter-spacing: 0; color: #ff8f8f; white-space: nowrap; }
.kform .more .wpcf7-not-valid-tip, .kform .wpcf7-acceptance + .wpcf7-not-valid-tip { position: static; display: block; margin-top: 6px; }
.kform .wpcf7-response-output { margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.8); }
.kform .wpcf7-spinner { display: none; }
.kform form.submitting .rb { opacity: .5; pointer-events: none; }
.kov-thanks { margin: 0; font-family: var(--f-ext); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6vw, 110px); line-height: .92; letter-spacing: -.03em; }
.kov-thanks span { color: var(--static-seccolor); }
@media (max-width: 760px) {
  .kov-x { top: calc(var(--abh, 0px) + 10px); right: 8px; width: 52px; height: 52px; } .kov-x i { top: 25px; left: 14px; right: 14px; }
  .kov-panel { padding-top: calc(var(--abh, 0px) + 112px); }
  .kform .mad { line-height: 1.7; }
  .kform .send .rb { margin-left: -4px; } /* „Abschicken“ ragt über den Ring und lief links aus dem Bild */
}
@media (prefers-reduced-motion: reduce) { .foot-q .ch { will-change: auto; } }

/* Satz-Formular der Projektseite („Hey, ich habe <Projekt> gesehen …“, Alex 30.10.) neben dem Ansprechpartner */
.kform.pform .kick { margin-bottom: 18px; }
.kform.pform .mad { font-size: clamp(22px, 2.15vw, 40px); max-width: none; }
.kform .kp { font-weight: 700; color: var(--main); }
.kform.pform .more { max-width: none; }