/* ============================================================
   UN/DONE — Partner- und Kontaktseite
   Schwarz wie die Startseite, grosse Schlagzeile, Zeichnung dahinter.
   Dark, underground, zurueckhaltend — nie marktschreierisch.
   ============================================================ */

/* ============================================================
   SCHRIFTEN — drei Ebenen, auf allen Seiten identisch.
     MAIN  : Bugfast — ausschliesslich die Wortmarke UN/DONE
     SUB 1 : Headlines
     SUB 2 : alles andere
   Nie direkt eine Schrift eintragen, immer eine dieser Variablen.
   ============================================================ */
@font-face{
  font-family:'Bugfast';
  src:url('Bugfast.otf') format('opentype');
  font-display:swap;
}
:root{
  --f-main:'Bugfast','Arial Black','Helvetica Neue',sans-serif;
  --f-sub1:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-sub2:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --rand:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
h1,h2,h3{font-size:inherit;font-weight:inherit;}
body{
  background:#000;color:#fff;
  font-family:var(--f-sub2);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* Zweisprachig: ohne data-lang bleibt Englisch stehen */
html:not([data-lang="de"]) [data-l="de"]{display:none;}
html[data-lang="de"] [data-l="en"]{display:none;}

/* Zeichnung fest hinter der ganzen Seite, in vollem Schwarz */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-1;
  background:url('img/partners-dark.png') center center / cover no-repeat;
  opacity:.55;
  pointer-events:none;
}

/* ===================== KOPF ===================== */
.top{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(16px,2.6vw,26px) var(--rand);
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.back img{height:clamp(16px,2vw,21px);width:auto;display:block;filter:invert(1);}
.nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;}
.nav a{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;transition:opacity .18s;
}
.nav a:hover{opacity:1;}
.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px;}
.lang{display:flex;align-items:center;gap:8px;}
.lang-btn{
  background:none;border:0;padding:4px 2px;cursor:pointer;font:inherit;color:inherit;
  font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.45;transition:opacity .18s;
}
.lang-btn:hover{opacity:.9;}
.lang-btn[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.lang-sep{font-size:11px;opacity:.3;}

/* ===================== AUFMACHER =====================
   Schlagzeile steht direkt auf der Zeichnung — bei dieser Groesse
   kein Lesbarkeitsproblem. Alles Kleinere bekommt eine weisse Flaeche. */
.head{padding:clamp(40px,8vh,110px) var(--rand) clamp(50px,9vh,130px);}
.hero{
  font-family:var(--f-sub1);
  font-size:clamp(52px,11.5vw,168px);
  font-weight:900;line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;
}
.plate{
  margin-top:clamp(26px,4vw,48px);
  max-width:34em;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  padding:clamp(22px,3vw,34px) clamp(20px,2.6vw,34px) clamp(26px,3vw,36px);
}
.pitch{font-size:clamp(17px,2.1vw,26px);line-height:1.35;}
.pitch em{font-family:var(--f-sub2);font-style:italic;font-weight:500;}
.sub{margin-top:14px;font-size:14px;line-height:1.5;opacity:.7;}
.cta{
  display:inline-block;margin-top:22px;
  background:#fff;color:#000;
  padding:16px 30px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .18s;
}
.cta:hover{opacity:.82;}

/* ===================== INHALTSFLAECHE =====================
   Alles ab hier liegt auf Weiss, damit die Zeichnung den Text nicht
   stoert — sie bleibt im Aufmacher und an den Raendern sichtbar. */
.sheet{background:#000;padding:0 var(--rand);}
.block{padding:clamp(40px,6vw,76px) 0;border-top:1px solid rgba(255,255,255,.14);}
.block:first-child{border-top:0;}
.kap{
  font-family:var(--f-sub1);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:clamp(22px,3vw,34px);opacity:.5;
}

/* Pakete */
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);}
.pakete article{border:1px solid rgba(255,255,255,.18);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;}
.pakete article.stark{background:#fff;color:#000;border-color:#fff;}
.pakete h3{
  font-family:var(--f-sub1);
  font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.pakete ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.pakete li{font-size:14px;line-height:1.5;padding-left:16px;position:relative;}
.pakete li::before{content:'—';position:absolute;left:0;opacity:.45;}
.ab{
  margin-top:auto;padding-top:20px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.5;
}
.fein{margin-top:clamp(20px,2.6vw,30px);font-size:14px;line-height:1.6;opacity:.65;}

/* Zweispalter */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);}
.zwei p{font-size:15px;line-height:1.65;}
.zwei p + p{margin-top:12px;}

/* ===================== FORMULAR ===================== */
.form label{
  display:block;margin:20px 0 8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.form label:first-of-type{margin-top:0;}
.form input,.form select,.form textarea{
  width:100%;padding:15px 14px;
  border:1px solid rgba(255,255,255,.45);border-radius:0;background:transparent;color:inherit;
  font:inherit;font-size:16px;              /* 16px verhindert Zoom auf iPhones */
}
.form textarea{resize:vertical;min-height:120px;}
.form select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid #fff;outline-offset:1px;}
.form .fehler{border-color:#ff4b4b;}
.send{
  margin-top:24px;width:100%;padding:19px 24px;border:0;cursor:pointer;
  background:#fff;color:#000;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .18s;
}
.send:hover{opacity:.82;}
.hint{margin-top:14px;font-size:12px;line-height:1.5;opacity:.6;}
.hint a{text-decoration:underline;text-underline-offset:2px;}

.kontakt h3{
  font-family:var(--f-sub1);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 10px;opacity:.5;
}
.kontakt h3 ~ h3{margin-top:30px;}
.kontakt p{font-size:15px;line-height:1.65;}
.kontakt .mail{margin-top:10px;}
.kontakt .mail a{text-decoration:underline;text-underline-offset:3px;}
.kontakt ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.kontakt li{font-size:14px;line-height:1.5;padding-left:16px;position:relative;}
.kontakt li::before{content:'—';position:absolute;left:0;opacity:.45;}

/* ===================== DUNKLES BAND ===================== */
.band{
  background:#fff;color:#000;
  padding:clamp(54px,9vw,110px) var(--rand);
  text-align:center;
}
.band h2{
  font-family:var(--f-sub1);
  font-size:clamp(26px,5vw,62px);font-weight:900;line-height:1.02;
  letter-spacing:-.02em;text-transform:uppercase;
}
.band p{margin-top:16px;font-size:clamp(14px,1.5vw,18px);opacity:.75;}
.pill{
  display:inline-block;margin-top:clamp(26px,3.4vw,42px);
  background:#000;color:#fff;
  padding:18px 46px;border-radius:999px;
  font-size:17px;font-style:italic;
  transition:transform .18s;
}
.pill:hover{transform:translateY(-2px);}
.band-links{
  margin-top:clamp(30px,4vw,48px);
  display:flex;gap:clamp(16px,2.4vw,30px);justify-content:center;flex-wrap:wrap;
}
.band-links a{font-size:11px;font-weight:700;letter-spacing:.16em;opacity:.6;transition:opacity .18s;}
.band-links a:hover{opacity:1;}

/* ===================== FUSS ===================== */
.foot{
  background:#000;
  padding:26px var(--rand) clamp(30px,5vw,54px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,30px);
}
.foot a{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55;}
.foot a:first-child{font-family:var(--f-main);font-size:15px;letter-spacing:.02em;text-transform:none;opacity:1;}
.foot a:hover{opacity:1;}
.foot .copy{margin-left:auto;font-size:11px;letter-spacing:.1em;opacity:.4;}

/* ===================== KLEINE DISPLAYS ===================== */
@media (max-width:900px){
  .pakete{grid-template-columns:1fr;}
  .zwei{grid-template-columns:1fr;gap:28px;}
  .plate{max-width:none;}
  .top{flex-wrap:wrap;gap:12px 18px;}
  .nav{order:3;width:100%;margin-left:0;}
  .foot .copy{margin-left:0;width:100%;}
}