/* ══════════════════════════════════════════════════════════════════════════
   Baukasten: Fusszeilen
   Braucht css/base.css (Tokens). Einbinden:
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/footer.css">
   Schaufenster: footer.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsames ────────────────────────────────────────────────────────── */
.ft{ background:var(--surface); border-top:1px solid var(--border);
     font-family:var(--font-sans); }
.ft-in{ max-width:var(--page); margin:0 auto; padding:0 var(--gutter); }

.ft-brand{ display:inline-flex; align-items:center; gap:8px;
           font-weight:700; font-size:19px; letter-spacing:-.02em;
           color:var(--text-primary); text-decoration:none; }
.ft-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }

.ft-note{ margin:calc(var(--unit) * 3) 0 0; font-size:14.5px; line-height:1.6;
          color:var(--text-muted); max-width:34ch; }

.ft-h{ margin:0 0 calc(var(--unit) * 3); font-size:13px; font-weight:500;
       letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }

.ft-list{ list-style:none; margin:0; padding:0; display:grid;
          gap:calc(var(--unit) * 2.5); }
.ft-list a{ font-size:15px; font-weight:400; color:var(--text-secondary);
            text-decoration:none; }
.ft-list a:hover{ color:var(--brand); }

/* Untere Zeile: Rechte links, Nebenlinks rechts */
.ft-base{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
          padding:calc(var(--unit) * 5) 0;
          border-top:1px solid var(--border);
          font-size:14px; color:var(--text-muted); }
.ft-base a{ color:var(--text-muted); text-decoration:none; font-weight:400; }
.ft-base a:hover{ color:var(--brand); }
.ft-base .sp{ margin-left:auto; }
.ft-base nav{ display:flex; gap:18px; flex-wrap:wrap; }

/* Soziale Zeichen */
.ft-social{ display:flex; gap:8px; }
.ft-social a{ width:36px; height:36px; border-radius:var(--r-btn);
              display:inline-flex; align-items:center; justify-content:center;
              color:var(--text-muted); border:1px solid var(--border); }
.ft-social a:hover{ color:var(--brand); border-color:var(--brand); }
.ft-social svg{ width:17px; height:17px; }


/* ══ A — Schlicht ═══════════════════════════════════════════════════════
   Eine Zeile: Rechtehinweis links, Links rechts. Für kleine Seiten. */
.ft--plain .ft-base{ border-top:0; padding:calc(var(--unit) * 7) 0; }


/* ══ B — Spalten ════════════════════════════════════════════════════════
   Marke links, darunter drei bis vier Spalten mit Links. Der Normalfall. */
.ft--cols{ padding-top:calc(var(--unit) * 16); }
.ft-cols{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
          gap:calc(var(--unit) * 10); padding-bottom:calc(var(--unit) * 12); }
@media (max-width:900px){
  .ft-cols{ grid-template-columns:repeat(2,minmax(0,1fr));
            gap:calc(var(--unit) * 8); }
}
@media (max-width:560px){ .ft-cols{ grid-template-columns:1fr; } }


/* ══ C — Mit Anmeldung ══════════════════════════════════════════════════
   Spalten plus ein Feld für die Mailliste. */
.ft--signup{ padding-top:calc(var(--unit) * 16); }
.ft-signup{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
            gap:calc(var(--unit) * 12); align-items:start;
            padding-bottom:calc(var(--unit) * 12);
            border-bottom:1px solid var(--border);
            margin-bottom:calc(var(--unit) * 12); }
.ft-signup h3{ margin:0 0 calc(var(--unit) * 2); font-size:21px;
               color:var(--text-primary); }
.ft-signup p{ margin:0; font-size:15.5px; color:var(--text-secondary); }
.ft-form{ display:flex; gap:10px; flex-wrap:wrap; }
.ft-form input{ flex:1 1 220px; height:46px; padding:0 15px;
  font:400 15.5px var(--font-sans); color:var(--text-primary);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-btn); }
.ft-form input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(16,24,40,.10); }
.ft-form .btn{ height:46px; }
.ft-small{ margin:calc(var(--unit) * 3) 0 0; font-size:13.5px;
           color:var(--text-muted); }
@media (max-width:900px){ .ft-signup{ grid-template-columns:1fr; } }


/* ══ D — Grosse Marke ═══════════════════════════════════════════════════
   Schriftzug über die volle Breite, darunter die Zeile. Für Portfolios. */
.ft--big{ padding-top:calc(var(--unit) * 16); overflow:hidden; }
.ft-big{ font-size:clamp(3rem, 1.5rem + 7vw, 9rem); line-height:.95;
         font-weight:700; letter-spacing:-.04em; color:var(--text-primary);
         margin:0 0 calc(var(--unit) * 10); }
.ft--big .ft-cols{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .ft--big .ft-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ft--big .ft-cols{ grid-template-columns:1fr; } }


/* ══ E — Dunkel ═════════════════════════════════════════════════════════ */
.ft--dark{ background:var(--inverted); border-top-color:rgba(255,255,255,.08); }
.ft--dark .ft-brand{ color:#fff; }
.ft--dark .ft-big{ color:#fff; }
.ft--dark .ft-h{ color:#8d98a4; }
.ft--dark .ft-note{ color:#9aa3ac; }
.ft--dark .ft-list a{ color:#c8cdd2; }
.ft--dark .ft-list a:hover{ color:#fff; }
.ft--dark .ft-base{ border-top-color:rgba(255,255,255,.1); color:#8d98a4; }
.ft--dark .ft-base a{ color:#8d98a4; }
.ft--dark .ft-base a:hover{ color:#fff; }
.ft--dark .ft-social a{ color:#c8cdd2; border-color:rgba(255,255,255,.18); }
.ft--dark .ft-social a:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.ft--dark .ft-signup{ border-bottom-color:rgba(255,255,255,.1); }
.ft--dark .ft-signup h3{ color:#fff; }
.ft--dark .ft-signup p{ color:#c8cdd2; }
.ft--dark .ft-form input{ background:rgba(255,255,255,.06); color:#fff;
                          border-color:rgba(255,255,255,.18); }
.ft--dark .ft-form input::placeholder{ color:#8d98a4; }
.ft--dark .ft-small{ color:#8d98a4; }