.foot-site{background:var(--ink,#16171A);color:#fff;padding:clamp(44px,8vh,96px) var(--sprint-pad,clamp(24px,4vw,88px)) clamp(22px,3.4vh,34px);border-top:1px solid rgba(255,255,255,.14)}
.foot-site>*{max-width:1520px;margin-left:auto;margin-right:auto}
.footTop{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,64px)}
@media(max-width:1000px){.footTop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Handy: Marke ueber die volle Breite, die drei Linkgruppen zweispaltig. Einspaltig standen
   rund 20 Links untereinander, der Footer war laenger als zwei Bildschirme. */
@media(max-width:620px){.footTop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}.footBrand{grid-column:1/-1}
  .footCol:last-child{grid-column:1/-1}.footCol:last-child ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}}
.footMark{display:flex;align-items:center;width:max-content;font-size:clamp(20px,1.5vw,26px);font-weight:700;letter-spacing:-.035em;color:#fff;text-decoration:none}
/* Gleiche Dark-Variante wie im Header. */
.footMark em{font-style:normal;flex:none;position:relative;width:19px;height:19px;border-radius:50%;border:1.5px solid #F2EFEA;margin-right:13px}
.footMark em::after{content:"";position:absolute;top:-1px;left:-1px;width:6.5px;height:6.5px;border-radius:50%;background:var(--accent)}
.footMark i{font-style:normal;color:var(--accent)}
.footBrand p{margin-top:16px;font-size:clamp(13px,.92vw,15.5px);line-height:1.6;color:rgba(255,255,255,.68);max-width:32ch;text-wrap:pretty}
.footBrand h4{margin-top:clamp(20px,3vh,28px)}
.footBrand .lines{display:flex;flex-direction:column;gap:8px}
.footBrand .lines a{font-size:clamp(14px,1.02vw,17px);font-weight:700;color:#fff;text-decoration:none;width:max-content;transition:color .3s ease}
.footBrand .lines a:hover{color:var(--accent)}
.footBrand .place{display:block;margin-top:clamp(18px,2.6vh,26px);font-size:clamp(11px,.76vw,12.5px);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.58)}
.foot-site h4{font-size:clamp(10.5px,.72vw,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.58);margin-bottom:clamp(12px,1.8vh,18px)}
.footCol ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:0}
.footCol a{font-size:clamp(13px,.92vw,15.5px);color:rgba(255,255,255,.82);text-decoration:none;width:max-content;transition:color .3s ease}
.footCol a:hover{color:var(--accent)}
.footBar{margin-top:clamp(32px,5.5vh,64px);border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(16px,2.4vh,22px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:clamp(11.5px,.8vw,13px);color:rgba(255,255,255,.62)}
.footBar nav{display:flex;flex-wrap:wrap;gap:10px}
.footBar a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .3s ease}
.footBar a:hover{color:var(--accent)}
.footBar nav a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid rgba(255,255,255,.26);font-size:13px;letter-spacing:0;font-weight:700;transition:color .3s ease,border-color .3s ease,background .3s ease}
.footBar nav a:hover{color:var(--accent);border-color:var(--accent);background:rgba(242,101,34,.1);transform:translateY(-2px)}
.footBar .up{font-weight:700}

/* ---- Nachtrag: echte Marke und echte Social-Icons ------------------------------
   Die Bildmarke war eine per CSS gezeichnete Naeherung (Ring + Punkt), die Icons
   waren die Buchstaben "in", "ig", "wa". Beides kommt jetzt aus echten Dateien,
   OHNE das Markup anzufassen: das <em> traegt das Logo, die drei Links tragen ihr
   Icon als Maske, damit Farbe und Hover weiter ueber currentColor laufen.
   Adressen bleiben href="#", wie ueberall sonst in diesem Entwurf. Echte Ziele:
   linkedin.com/in/alexanderbarzik · instagram.com/barzik.studio · wa.me/491606111711 */
.footMark em{border:0;width:26px;height:26px;margin-right:12px;
  background:url("logo-mark-dunkel.svg?v=2cac0f62b1") center/contain no-repeat}
.footMark em::after{content:none}
.footBar nav a{font-size:0;line-height:0;color:rgba(255,255,255,.78)}
.footBar nav a::before{flex:none}
.footBar nav a::before{content:"";width:18px;height:18px;display:block;
  background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.footBar nav a[aria-label="LinkedIn"]::before{-webkit-mask-image:url("icon-linkedin.svg?v=60782e9aeb");mask-image:url("icon-linkedin.svg?v=60782e9aeb")}
.footBar nav a[aria-label="Instagram"]::before{-webkit-mask-image:url("icon-instagram.svg?v=ed31c8efe6");mask-image:url("icon-instagram.svg?v=ed31c8efe6")}
.footBar nav a[aria-label="WhatsApp"]::before{-webkit-mask-image:url("icon-whatsapp.svg?v=18f99b8a03");mask-image:url("icon-whatsapp.svg?v=18f99b8a03")}

/* ---- Werkstattbericht (24.09.2026) ------------------------------------------
   Anmeldung ueber den Linkspalten, auf demselben Raster wie .footTop: der Text
   steht ueber der Marke, das Formular ueber den drei Linkgruppen. Das Formular
   (.nlForm) nutzt auch /newsletter. Eigene Regeln fuer Feld und Knopf, weil jede
   Seite andere Grundstile laedt (analyse.css setzt `input` global, recht.css
   gar nichts). Feld mindestens 16 px, sonst zoomt iOS beim Antippen. */
.footNl{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,64px);align-items:end;
  padding-bottom:clamp(36px,6vh,64px);margin-bottom:clamp(36px,6vh,64px);border-bottom:1px solid rgba(255,255,255,.14)}
.footNl .nlWeg{grid-column:2/-1}
.footNl h2{font-size:13px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent,#F26522);margin:0 0 14px}
.footNlSatz{font-size:clamp(22px,2.1vw,34px);line-height:1.12;letter-spacing:-.035em;font-weight:700;color:#fff;max-width:22ch;text-wrap:balance}
.footNlText p+p{margin-top:12px;font-size:clamp(13px,.92vw,15.5px);line-height:1.6;color:rgba(255,255,255,.68)}
.nlFeld{flex:1;min-width:0;display:flex;flex-direction:column}
.nlLab{display:block;font-size:13px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.58);margin-bottom:6px}
.nlZeile{display:flex;align-items:flex-end;gap:16px}
.nlForm input[type="email"]{width:100%;min-height:52px;margin:0;padding:10px 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.32);
  border-radius:0;color:#fff;font:inherit;font-size:clamp(16px,1.2vw,20px);font-weight:600;letter-spacing:-.01em;outline:none;transition:border-color .3s ease}
.nlForm input[type="email"]::placeholder{color:rgba(255,255,255,.32)}
.nlForm input[type="email"]:focus{border-bottom-color:var(--accent,#F26522)}
.nlForm input[aria-invalid="true"]{border-bottom-color:#ff8a8a}
.nlForm button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 26px;border:0;border-radius:0;
  background:#F26522;color:#fff;font:inherit;font-size:15px;font-weight:700;line-height:1.25;cursor:pointer;transition:box-shadow .3s ease,transform .3s ease}
.nlForm button:not(:disabled):hover{box-shadow:0 10px 26px rgba(242,101,34,.32);transform:translateY(-1px)}
.nlForm button[aria-busy="true"]{opacity:.7;cursor:progress}
.nlHinweis{margin-top:14px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.58);max-width:62ch}
.nlHinweis a{color:rgba(255,255,255,.84);text-decoration:underline;text-underline-offset:2px}
.nlHinweis a:hover{color:var(--accent,#F26522)}
.nlStatus{font-size:clamp(14px,1vw,16px);line-height:1.5;color:#fff}
.nlStatus:not(:empty){margin-top:12px}
.nlStatus[data-art="ok"]::before{content:"\2713\00a0";color:var(--accent,#F26522);font-weight:700}
.nlStatus[data-art="fehler"]{color:#ff9d9d}
.nlForm .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1000px){.footNl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footNl .nlWeg{grid-column:auto}}
@media(max-width:620px){.footNl{grid-template-columns:minmax(0,1fr)}.nlZeile{flex-direction:column;align-items:stretch;gap:12px}.nlForm button{width:100%}}
@media(prefers-reduced-motion:reduce){.nlForm button:not(:disabled):hover{transform:none}}

/* ---- Handy (24.09.2026) ---------------------------------------------------------------
   Rueckmeldung mit iPhone-Screenshots: „footer ist viel viel zu gross, newsletter brauchen wir
   mobile nicht“. Gemessen vorher: 1.400 px, also 2 bis 2,6 Bildschirme, davon 400 px Newsletter.
   Jetzt: kein Werkstattbericht-Block, Kontakt in einer Zeile, Links als Fliesszeilen statt
   Listen (Tippziel bleibt 44 px, gemeinsam.css), „Ausgewaehlte Arbeiten“ entfaellt (stehen auf der
   Startseite), Ueberschriften nur fuer Screenreader. Gilt auch fuer das Handy im Querformat
   (pointer:coarse, niedrig): dort war der Footer 2,8 Bildschirme hoch. */
/* Zweite Runde am selben Abend („footer immer noch zu big“, 479 px): Marke, Satz und Studio-Links
   entfallen auch. Die Kopfzeile traegt Logo und Menue mit denselben Zielen. Uebrig: Kontakt,
   Rechtliches, Social, nach oben, Copyright. */
@media (max-width:620px), (pointer:coarse) and (max-height:500px){
  .footNl{display:none}
  .foot-site{padding-top:16px;padding-bottom:14px}
  .footTop{display:flex;flex-direction:column;gap:0}
  .footMark,.footBrand p,.footBrand .place,.footStudio,.footArbeiten{display:none}
  .foot-site h4{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .footBrand .lines{flex-direction:row;flex-wrap:wrap;column-gap:22px;row-gap:0}
  .footCol ul,.footCol:last-child ul{display:flex;flex-direction:row;flex-wrap:wrap;column-gap:18px;row-gap:0}
  .footCol a{font-size:14.5px}
  .footRecht a{font-size:13px;color:rgba(255,255,255,.6);justify-content:center}
  .footBar{margin-top:6px;padding-top:10px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px}
  .footBar nav{order:1}
  .footBar .up{order:2}
  .footBar>span{order:3;grid-column:1/-1}
}